这篇文章主要介绍了详解CSS-opacity子元素继承父元素透明度的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
在写项目页面的过程中,遇到子元素继承父元素透明度的问题,查找了好多文档给出的都是第一种方法,这种方法主要解决简单场景的,而对于设置复杂的background时,该方法不再适用。
分析原因:
父元素背景颜色设置透明度opacity:0.5,子元素会继承,给子元素设置opacity:1,子元素的透明度也是在父元素0.5的基础上设置的。
第一种方法:
父元素背景颜色设置透明度时,避免使用background:#000;opacity:0.5,建议使用background:rgba(0,0,0,0.5)
第二种方法:
如果设置背景色为渐变色等这种复杂背景,第一种方法就不在适用。
background-image: linear-gradient(-180deg, rgba(20,20,20,0.00) 19%, #303030 100%);
opacity: 0.5;
因为子元素会继承父元素的opacity属性,我们让它不成为子元素。新增一个子元素,将其绝对定位到父元素位置,然后在该元素上设置背景色与透明度。
-
<
div
class="
container">
-
<
div
class="
content">
-
<
p>我是
class为
content的
DIV</
p>
-
<
p>我的背景是
class为
background的背景</
p>
-
<
p>通过相对定位和绝对定位,我把
class为
background的
DIV移动到了我的位置。</
p>
-
<
p>同时通过我的较大的
z-index浮在了它的上面。
:)</
p>
-
</
div>
-
<
div
class="
background"></
div>
-
</
div>
-
-
.container {
-
width:
300px;
-
height:
250px;
-
color:
#fff;
-
position:relative;
-
}
-
.content {
-
position:relative;
-
z-index:
5;
-
width:
100%;
-
height:
100%;
-
overflow: hidden;
-
}
-
.background {
-
background-color:
#37a7d7;
-
position:absolute;
-
top:
0px;
-
left:
0px;
-
width:
100%;
-
height:
100%;
-
z-index:
1;
-
/*兼容IE7、8 */
-
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-
filter:
alpha(opacity=
50);
-
opacity:.
5;
-
}
面对国内众多的云平台,个人和企业该如何选择呢?可以参考这篇文档:【云服务器推荐】2021年腾讯云、阿里云、华为云服务器价格和配置评测