CSS实现父元素半透明,子元素不透明
2014-04-28 15:46
253 查看
CSS实现父元素半透明,子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承。
如下代码,则子元素中也将是半透明效果,无论你将子元素的半透明值重置还是如何都不会改变这一情况。
HTML:
其实在新的CSS3规则里面的属性 GRBA已经可以方便的实现父元素透明,而子元素不透明了。 如下代码
但是对于IE6~8方面就无法兼容了,可以适当的降级。 如果一定要兼容的话只能考虑使用绝对定位的,看上去是包含关系的两个层,其实是兄弟关系,使用JS来控制其位置的呈现,这种具体就不再陈述了,网上解决方案很多。
如下代码,则子元素中也将是半透明效果,无论你将子元素的半透明值重置还是如何都不会改变这一情况。
.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实现父元素半透明,子元素不透明
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
- Css如何实现背景色透明或半透明但内容不透明
- 纯CSS实现背景半透明文字不透明效果兼容IE6
- css实现纯文字内容元素透明背景(兼容IE6)
- css 实现层半透明,且块内文字不透明(兼容ie6等各种浏览器)
- 纯css实现背景图片半透明,内容不透明
- CSS实现Div层背景半透明而内容不透明的效果
- CSS实现Div层背景半透明而内容不透明效果
- 利用css实现背景半透明,文字不透明。
- 用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果
- 实现透明背景但背景上元素不透明
- CSS实现背景透明,文字不透明,兼容所有浏览器
- CSS实现元素的居中显示
- js css 实现遮罩层覆盖其他页面元素附图
- css实现遮罩层(解决透明背景上的文字不透明)
- CSS实现HTML元素透明的方法小结
- css实现元素翻转(不是旋转)