标签：back 继承 pos 透明 z-index 转换 ffffff rgb height
在写CSS的发现，将父元素的opacity设置为0.5之后，子元素一定会继承这个属性，且对子元素单独设置opacity，也无效。
1 #texts{ 2 height: 30px; 3 width:380px; 4 background: #000000; 5 position: absolute; 6 top: 270px; 7 color: #FFFFFF; 8 z-index: 997; 9 font-size: 12px; 10 opacity: 0.5; 11 } 12 .textRight,.textLeft{ 13 width: 186px; 14 padding: 0 2px; 15 line-height: 30px; 16 opacity: 1; 17 } 18 #texts .textRight{ 19 text-indent: 70px; 20 float: right; 21 } 22 .textLeft{ 23 text-indent: 10px; 24 float: left; 25 }
.textRight,.textLeft 的opacity属性完全无效。
后续发现另外一种写法是有效的，将背景色转换为RGG值， background:rgb(0,0,0,0.5),最后一位表示透明度，然后再子元素设置opacity，发现有效（不考虑兼容性）；代码如下
#texts{ height: 30px; width:380px; background: rgb(0,0,0,0.5); position: absolute; top: 270px; color: #FFFFFF; z-index: 997; font-size: 12px; } .textRight,.textLeft{ width: 186px; padding: 0 2px; line-height: 30px; opacity: 1; } #texts .textRight{ text-indent: 70px; float: right; } .textLeft{ text-indent: 10px; float: left; }
标签：back 继承 pos 透明 z-index 转换 ffffff rgb height
原文地址：http://www.cnblogs.com/zyq562550692/p/6820161.html
