rgba兼容IE系列

在容器里面如果用到opacity或者filter:opacity里面的内容也会被滤镜化

如果不想里面的内容也被滤镜化我们可以用rgba来处理或者用透明的背景图片。

兼容ie的rgba的写法

background: rgba(0,0,0,0.75);-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#bf000000',EndColorStr='#bf000000')

其中 StartColorStr,和EndColorStr 的参数分别代表:透明度以及颜色。

这种写法兼容ie6 7 8 10 。但是ie9两者滤镜叠加了。所以以下ie hack处理一下

<!--[if lte IE 8]>

<style>

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#bf000000',EndColorStr='#bf000000');

</style>

<![endif]-->

HTML代码

<div class="warpper">
    <div class="inner">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br></div></div> 

CSS代码

<!--[if lte IE 8]>
    <style>
    .warpper{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#bf000000',EndColorStr='#bf000000')};
    </style>
<![endif]-->
<style>
    .warpper{padding:10px;width:200px;height:200px;background:rgba(0,0,0,0.5);}
    .inner{background:#ff0;}
</style> 
 

由于这个滤镜实现是不能像遮罩一样遮住别的元素,所以在做大的弹出框的时候还是需要按照传统的方式另外的添加一个div元素来遮住。

这样的方式只是适合于 小的边框阴影。