Question

我有一个透明背景颜色的盒子，下面是CSS＆amp; HTML。

CSS：

#box {
    color: black;
    text-align: center;
    margin: 50px auto;
    background: blue;
    opacity: 0.1;
    border-radius: 11px;
    box-shadow: 1px 1px 1px #656565;
    padding: 20px;
    font-size: 25px;
}

HTML：

<div id="box" class="center">
    I need this text to be black.
</div>

您可以在此处查看演示：http://jsfiddle.net/jrmXh/

正如你所看到的那样，尽管是黑色的文字的颜色没有显示，我想知道为什么会发生这种情况，以及如何解决它。

Answer 1

opacity属性会影响它应用的元素的所有子元素。即元素本身及其包含的所有元素都变得不透明/透明。你需要的是将rgba值应用于div：

#box {
  color:black; 
  text-align:center; 
  margin:50px auto; 
  background: rgba(0,0,255,0.1); 
  border-radius:11px; 
  box-shadow:1px 1px 1px #656565; 
  padding:20px;
  font-size:25px; 
}

Answer 2

省略不透明度并使背景颜色透明，如下所示 -

#box {
color: black;
text-align: center;
margin: 50px auto;
background: rgba(0, 0, 255, 0.09);
border-radius: 11px;
box-shadow: 1px 1px 1px #656565;
padding: 20px;
font-size: 25px;
}

Answer 3

应用这些更改 -

删除不透明度
使用background-color：rgba（0,0,255,0.1）;而不是蓝色

身体的背景颜色是白色，这就是为什么你无法看到透明度的原因。尝试改变身体颜色和你会看到透明度（rgba中的alpha）效果。

使用此代码检查透明效果 - rgba中的Alpha

<style>
  body{
    background-color:#FF0000;
  }
</style>

影响文本颜色的透明背景

3 个答案: