rgba的ie8兼容写法,ie9下会重叠rgba和filter解决方案

rgba()可以为背景设置透明度,但不支持ie8,要兼容ie8,可以用ie8的filter属性,用法如下:


background: rgba(255,255,255,.1);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);  //兼容ie8

解释:利用ie8支持的渐变属性,可以实现背景透明,其中,#19fffffff中的19代表透明度的代号(见下图),ffffff代表对应的背景颜色,如:

background: rgba(0,0,0,0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);  //兼容ie8

注意:在ie9下,由于ie9同时支持rgba和filter,因此会出现两个属性重叠,背景变暗的情况,所以,上述方案仍不是最佳方案,最好的方案是:

在页面头部单独加入ie8的hack,只对ie8生效,在正常的css里只写rgba属性,如下:

<!--[if IE 8]>
<style>
    .class1{-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)";}
    .class2{-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000)";}
</style>
<![endif]-->

注:filter的前缀-ms-不可省略

posted @ 2017-03-22 16:11  汪培  阅读(653)  评论(0编辑  收藏  举报