CSS如何设置透明度不继承？子元素不继承父元素的透明度的方法

微wx笑 2020-07-30【网页网站】1077 6 0关键字： CSS 透明度继承 opacity

在设置网页的时候，为了效果好看，经常使用到半透明的效果，但是使用opacity来设置透明度的话，子元素就会继承父元素的透明度，使效果变得更差了，如何解决这种问题呢？

在设置网页的时候，为了效果好看，经常使用到半透明的效果，但是使用opacity来设置透明度的话，子元素就会继承父元素的透明度，使效果变得更差了，如何解决这种问题呢？Wc4无知

解决方法：

一、用css3的rgba颜色rgba(0,0,0,0.5)，最后那个0.5是透明度。缺点是老版本ie不支持rgba。可以尝试使用“filter:Alpha(opacity=20);/*实现IE背景透明*/”Wc4无知

二、用半透明的png背景图做外面div的背景，缺点是ie6下需要另外增加一个js来让png背景半透明。Wc4无知

三、使用绝对定位“position:absolute;”，把子元素拿到外面来。参考下面的示例：Wc4无知

Wc4无知

示例1：

参考：https://www.cnblogs.com/275095923/archive/2011/12/13/2285657.htmlWc4无知

Wc4无知

示例2：

参考:https://www.cnblogs.com/nightc/archive/2013/01/24/2908063.htmlWc4无知

html代码：Wc4无知

<div class="cnt">  
<div class="bd">  
content here<br/>  
content here<br/>  
content here<br/>  
content here<br/>  
content here<br/>  
content here   
</div>  
<div class="ft"></div>  
</div>

css代码：
Wc4无知

.cnt{   
    width:45em;   
    overflow:hidden; /*必须的，否则ft的透明层将会偏出*/  
    color:#fff;   
    position:absolute;/*根据需要设定，不是必须的*/  
    filter:Alpha(opacity=20);/*IE下的透明度*/  
    _background:#000;/*IE下的背景色*/  
    _position:static;/*必须的*/  
}   
   
.bd{   
    position:relative;/*必须的，和父层的position:static对应*/  
}   
   
.ft{　　/*FF下，做一个透明层，放在内容下面*/  
    background:#000;   
    position:absolute; /*必须*/  
    top:0;/*必须*/  
    left:0;/*必须*/  
    rightright:0;/*必须*/  
    bottombottom:0;/*必须*/  
    z-index:-1;/*必须*/  
    opacity:0.2;/*必须*/  
    *opacity:1;　/*这个是为了应付其他浏览器*/  
    *background:transparent; /*IE下是完全透明的*/  
}