CSS控制元素背景透明度总结
2014-07-11 10:52
260 查看
方法一:CSS3的background rgba
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000',endColorstr='#7F000000');background:rgba(0,0,0,0.5);
常用的方法是rgba来实现背景透明度 兼容ie6 ie7 ie8的做法是用ie的滤镜实现
有个小问题就是通过这种方法实现背景透明度的话在ie系列下如果元素需要绑定事件,鼠标移动到透明区域总是不能准确获取元素。
方法二:opacity
在实际案例中opacity我们通常用在改变元素的透明度,而不是背景透明度。opacity:0.5;filter: alpha(opacity=50);*zoom:1;
IE4-IE7使用filter: alpha(opacity=50),但要同时使该元素拥有hasLayout;
这种方法实现的话里面包含的元素也会被改变透明度。
有幸看了一下163的代码发现有个方法可以让子元素100%透明度的办法,就是设置position: relative;
<!DOCTYPE> <html> <head> <title>opacity</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> body{background-color: red;} .box{opacity:0.5;filter: alpha(opacity=50);*zoom:1;background-color: #000;width: 500px;height: 500px;text-align: center;line-height: 500px;font-size: 2em; color: #fff;} .box p{position: relative;} </style> </head> <body> <div class="box"> <p>文字123文字123文字</p> </div> </body> </html>
最终解决方法
如果产品需求只是简单的改变背景透明度,方法一就足够了。但是如果还需要给有背景透明的的元素再绑定事件的话就要做一下调整了。
支持CSS3的浏览器用rgba,ie就用filter: alpha(opacity=50),子元素设置position: relative;
.box{background-color:#000;filter:alpha(opacity=50);background:rgba(0,0,0,0.5);} .box p{position:relative;}
相关文章推荐
- CSS如何只改变父元素背景透明度不改变子元素透明度
- CSS如何只改变父元素背景透明度不改变子元素透明度
- CSS控制背景透明度
- Asp.Net 、Css元素定位及元素显示控制总结
- CSS 设置背景透明度,不影响子元素
- css 实现只改变背景透明度,不改变子元素透明度
- css利用id和class来控制元素样式技巧总结
- 如何用CSS控制网页背景透明度?
- 初识CSS--常用元素总结(四)-边框与背景
- CSS只改变背景透明度,不改变子元素透明度
- CSS只改变背景透明度,不改变子元素透明度
- CSS控制背景图片
- css 控制first-letter伪类的背景
- 利用css控制透明背景png
- 【总结】CSS透明度大汇总
- CSS控制网页背景颜色的渐变代码
- 用css进行网页背景位置控制
- CSS控制网页元素
- css控制背景图左右对齐 实现鼠标移入移出效果
- css控制submit加载背景图片做提交按钮