rgba相容IE系列

標籤：style   class   blog   code   tar   color   

在容器裡面如果用到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元素來遮住。

這樣的方式只是適合於 小的邊框陰影。