0

我有一个透明背景颜色的框，下面是 CSS 和 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/

如您所见，文本的颜色尽管是黑色并没有显示出来，我想知道为什么会发生这种情况，以及如何解决它。

4

3 回答 3

4

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; 
}
于 2013-09-11T10:38:36.280 回答
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;
}
于 2013-09-11T10:41:06.423 回答
0

应用这些更改 -

  1. 移除不透明度
  2. 使用背景色：rgba(0,0,255,0.1); 而不是蓝色

身体的背景颜色是白色的，这就是为什么你看不到透明度的原因。尝试更改主体颜色，您将看到透明度（rgba 中的 alpha）效果。

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

<style>
  body{
    background-color:#FF0000;
  }
</style>
于 2013-09-11T12:00:38.943 回答