如何覆盖孩子的不透明度
这个问题在这里已经有了答案：
你不能。
如果你使用简单的背景色，那么是使用rgba代替。
#text_holder {
background:rgba(0, 0, 255,1);
width: 500px;
height: 200px;
}
#text_holder2 {
background: rgba(0, 0, 255,1);;
width: 500px;
height: 200px;
color: rgba(255, 255, 0, 1);
}
#alpha_30 > div {/* select child */
/*opacity: 0.3;*/
background:rgba(0, 0, 255,0.3);/* give opacity to bg color only */
color: #ff0000;
}
#alpha_100 {
color: #ff0000;
}
对于作为背景的图像，您可能会通过使用rgba中的主背景色来伪造不透明。 如果你希望背景的不透明度为0.3，那么做1 -0.3 = 0.7来设置你的rgba不透明度。
<div class="bg-img">
<p class="text_holder"> some text</p>
</div>
.bg-img {
background:url(http://lorempixel.com/100/100/abstract);
}
.bg-img .text_holder {
background:rgba(255,255,255,0.3);/* here white cause body as white background */
}
这些都是解决方法：两者的DEMO（测试底部的bg图像）：http://codepen.io/anon/pen/yGgpz
使用rgba(225, 0, 0, .3)作为父div。
小提琴示例：http://fiddle.jshell.net/f93zT/
链接地址: http://www.djcxy.com/p/28075.html