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-不可省略