CSS实现父元素半透明,子元素不透明

更新时间:2023-07-28 04:34:39 阅读: 评论:0

CSS实现⽗元素半透明,⼦元素不透明
CSS实现⽗元素半透明,⼦元素不透明。很久以来⼤家都习惯使⽤opacity:0.5在新式浏览器⾥实现半透明,⽽对IE较旧的版本使⽤filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被⼦元素所继承。唤醒英语
如下代码,则⼦元素中也将是半透明效果,⽆论你将⼦元素的半透明值重置还是如何都不会改变这⼀情况。樵叶蜂
.parent{opacity:0.5; background-color:#fff;}窜货
.child{opacity:1.0; background-color:#fff; height:200px;}
HTML:
<div class="parent">
拼博
<div class="child">哈哈哈</div>
小学语文板书设计
</div>
否定词书香少年
其实在新的CSS3规则⾥⾯的属性 GRBA已经可以⽅便的实现⽗元素透明,⽽⼦元素不透明了。如下代码
<div class="parent" >
<div class="child" >哈哈哈</div>慷慨解囊
</div>
但是对于IE6~8⽅⾯就⽆法兼容了,可以适当的降级。如果⼀定要兼容的话只能考虑使⽤绝对定位的,看上去是包含关系的两个层,其实是兄弟关系,使⽤JS来控制其位置的呈现,这种具体就不再陈述了,⽹上解决⽅案很多。

本文发布于:2023-07-28 04:34:39,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1121128.html

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

标签:元素   半透明   实现   关系   看上去   考虑   透明   语文
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图