码迷,mamicode.com
首页 > 其他好文 > 详细

兼容opacity的方法

时间:2014-08-13 12:24:36      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:style   color   使用   os   for   ar   art   问题   

实现图片或背景透明可以使用opacity,如opacity=0.5。但是ie9以下的都不支持,这时候可以使用ie特有的滤镜来实现,只需一句话,filter:alpha(opacity=50);

但是注意,如果是设置一个div的opacity属性,那它里面的元素也都有了透明属性。有的时候我们只想让背景透明,不想让里面的内容透明。

这个时候就考虑rgba颜色。比如

<style type="text/css">.item{background-color:rgba(0,0,0,0.2);}</style>

但是要兼容ie就必须使用滤镜

filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#33000000‘, endColorstr=‘#33000000‘);zoom:1;

所以可以样式可以写成<style type="text/css">.item{background-color:rgba(0,0,0,0.2);filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#33000000‘, endColorstr=‘#33000000‘);zoom:1;}</style>

这样问题又出现了,ie9就就会出现双重滤镜,背景越来越不透明了,要去掉ie9中的滤镜就可以针对csshack写了

<!--[if lte IE 8]>
<style>
 .item{filter:progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startColorstr=‘#33000000‘, endColorstr=‘#33000000‘);zoom:1;}
</style>
<![endif]-->

问题解决了

 

兼容opacity的方法,布布扣,bubuko.com

兼容opacity的方法

标签:style   color   使用   os   for   ar   art   问题   

原文地址:http://www.cnblogs.com/jiaojiaome/p/3909337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!