<=IE8 的 CSS3 有效“不透明度”

Posted 2023-03-06

【中文标题】<=IE8 的 CSS3 有效“不透明度”

【英文标题】：CSS3 valid 'opacity' for <=IE8

【发布时间】：2014-03-18 10:04:06

【问题描述】：

我正在努力确保我的公司网站是 html5/CSS3 有效，但我遇到了一小段 CSS 的问题。

基本上，我们有一个经过过滤的团队成员列表（每个人的照片，下面都有姓名/电子邮件），超出范围的成员放在最后并略微褪色（opacity: 0.3;）。但是，由于 IE8（及之前）比较特殊，我使用了以下 -

filter: alpha(opacity=30);

然而，这导致了一个验证错误“Parse Error opacity=30)”，所以我做了一些搜索并将其替换为 -

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

这次没有错误，但我确实收到了警告 - “Property -ms-filter is an unknown vendor extension”

有没有人知道一种 CSS3 有效的应用 opacity 的方法，它向后兼容 IE8（即没有错误或警告）？谢谢。

【问题讨论】：

供应商扩展警告可以忽略。真的。相信我。

这是在 IE 8 及更低版本中实现opacity 的唯一方法（这些浏览器中有很多不“标准”的东西）。

【参考方案1】：

一种方法是简单地在不透明度旁边添加一个额外的效果。这样，不呈现 opacity 属性的浏览器仍然能够区分超出范围的团队成员：

selector 
    background: #dfdfdf;    /* New property, light grey background. */
    opacity: 0.3;           /* Old existing property, no validation warnings. */

【讨论】：

通常我会同意，但在这种情况下，我的选择器是图像，因此在这种情况下很难应用任何此类效果。谢谢。