我有一个透明背景色的框,下面是 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/
如您所见,尽管是黑色,但文本的颜色并未显示,我想知道为什么会发生这种情况,以及如何解决它。
最佳答案
不透明度属性会影响它所应用的元素的所有子元素。即元素本身和它包含的所有元素都变得不透明/透明。 您需要的是将 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;
}
关于html - 影响文本颜色的透明背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18738803/