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" style="background:rgba(255,255,255,0.5)"><div class="child" style="height:200px; background-color:red">哈哈哈</div>
</div>

但是对于IE6~8方面就无法兼容了，可以适当的降级。如果一定要兼容的话只能考虑使用绝对定位的，看上去是包含关系的两个层，其实是兄弟关系，使用JS来控制其位置的呈现，这种具体就不再陈述了，网上解决方案很多。

CSS实现父元素半透明，子元素不透明相关推荐

html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: <button id="box" onclick="pop_box()">弹出框< ...
CSS实现父元素半透明,子元素不透明的问题
关于这个问题,其实是不熟悉opacity和rgba,下面解释一波~ 颜色我们都知道有RGB,在RG个新的值,成B颜色模型增加了一为了RGBA颜色模型.最后一个是alpha通道的值,取值在0.0到1.0 ...
[css] css中padding和margin是相对于父元素还是子元素呢？
[css] css中padding和margin是相对于父元素还是子元素呢? padding就是往自己身体里塞东西(盒子里面),margin就是穿衣服(盒子外面). ==>padding相对于子 ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
前端----CSS 父元素在子元素之上显示
今天做练习想让父元素在上覆盖子元素的边框, 在网上查了些资料, 发现了一种办法能让父元素靠上显示, 把子元素的z-index值设为负数 (position不能是默认值,z-index对定位属性生效) ...
[css] 当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？
[css] 当使用opacity时会使得元素的子元素也透明,此时不想要子元素也跟着透明怎么办? 当父元素使用opacity时,子元素也会继承该透明度,即使重新设置透明度也不行.楼上的两种方法要么是放弃 ...
jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素使用jquery获取同级元素:siblings() 例如:$(t ...
HTML中的父元素与子元素
我是一个前端小白,目前将HTML,css基础学完了,在居中设置中讲解到父元素怎么设置子元素怎么设置,那么父元素,子元素到底是什么? 如以下代码: </head> <body> ...
CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...

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

CSS实现父元素半透明，子元素不透明相关推荐

最新文章

热门文章