0

我想开始使用当前正在开发的 CSS3 filter:opacity() 和 filter:drop-shadow() 属性，因为我读到它们在某些机器上的某些浏览器中是硬件加速的。但在这个早期阶段，我肯定需要回退到普通的 CSS 属性，如不透明度和框阴影。

问题是，在旧的之后放置新的正常 CSS 后备策略失败了。通常新的（如果支持）会覆盖旧的。但在这种情况下，新旧是完全不同的属性，它们会结合起来！CSS 声明...

.half-transparent{
    opacity: 0.5;
    -webkit-filter: opacity(0.5);
    filter: opacity(0.5);
}

...将导致总不透明度为 25% 而不是 50%。

示例： https ://jsfiddle.net/uq4ybvk8/

有什么方法（最好只有 CSS）来创建从新过滤器属性到完善的 CSS 属性的后备？

4

1 回答 1

1

对filter（带和不带前缀）的支持应该与对条件规则模块（ ）的支持很好地重叠@supports，但旧版本的 Safari/iOS（Safari 9 之前）除外。如果您将其视为增强功能（即opacity其他浏览器回退到常规），那应该不是什么大问题。试试这样的，也许？

.half-transparent {
  opacity: 0.5;
}
@supports ((filter: opacity(0.5)) or (-webkit-filter: opacity(0.5))) {
  .half-opacity {
    opacity: 1;
    -webkit-filter: opacity(0.5);
    filter: opacity(0.5);
  }
}
于 2015-12-18T20:14:43.680 回答