css透明属性
最近因为⼯作需要，需要⾃定义弹窗，并让背景透明。因为⾃⼰也是初学者，就碰到了⽐较经典的问题。
看代码
<div class="top">
<div class="sub">css opacity attribute!</div>
</div>
以上结构，如果设置top的opacity属性来达到透明效果时，你会发现，⾥⾯的元素全部继承了透明的效果，这显然不能达到要求。⾄少字体总得看的清楚吧。
从⽹上搜罗了下相关知识点
先给出标准的css透明写法，兼容⼤部分浏览器
.top {
filter:alpha(opacity=50);
-moz-opacity:0.5;cssclass属性
-khtml-opacity: 0.5;
opacity: 0.5;
}
上⾯的⼏个属性分别是:
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性⽀持Firefox、Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
-moz-opacity:0.5; 这个是为了⽀持⼀些⽼版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了⽀持⼀些⽼版本的Safari浏览器。
上⾯的例⼦涉及到透明属性的继承问题
标准的是，当⽗元素设置了透明属性，其⼦元素也会跟着继承透明属性，很多会马上想到，把⼦元素重新设置opacity：1，但是很可惜，这是⽆效的。有些⼈为了省时间，可能当⼦元素⾥⾯的内容多少还看得清楚的时候，就这点问题就会忽略不计。当然，也有很多需求是需要完全不透明的内容。
⽐较有⽤的⼀个⽅法就是，添加多⼀个div（⼦元素），这个div和你要显⽰的内容块是属于兄弟关系，那么给Div和内容块设置绝对定位，然后给div设置透明度，此时的内容块会覆盖在上⾯，也就模拟了我们所要的效果。
具体写法可参考：
以上内容部分来⾃帕兰印象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。