没有合适的资源?快使用搜索试试~ 我知道了~
详解CSS-opacity子元素继承父元素透明度的解决方法
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
3 下载量 165 浏览量
2020-11-19
12:42:34
上传
评论
收藏 36KB PDF 举报
温馨提示
试读
1页
在写项目页面的过程中,遇到子元素继承父元素透明度的问题,查找了好多文档给出的都是第一种方法,这种方法主要解决简单场景的,而对于设置复杂的background时,该方法不再适用。
资源推荐
资源详情
资源评论
详解详解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;
}
参考:https://www.cnblogs.com/liu-l/p/3890861.html
资源评论
weixin_38705699
- 粉丝: 3
- 资源: 962
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功