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

最新推荐文章于 2024-01-05 18:30:00 发布

转载最新推荐文章于 2024-01-05 18:30:00 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aiyunyun/p/6600506.html

本文介绍了如何使用IE8的filter属性实现背景透明效果，并提供了一种针对IE8的hack方法来解决IE9中出现的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/aiyunyun/p/6600506.html