CSS3过滤器：不透明度（X）与回退到不透明度：X，相同的过滤器：下降阴影（）框阴影

我想开始使用CSS3过滤器：opacity（）和filter：drop-shadow（）属性，目前正在开发中，因为我看到它们在某些机器上的某些浏览器中被硬件加速。但在这个早期，我绝对需要回退到普通的CSS属性，比如不透明和盒子阴影。CSS3过滤器：不透明度（X）与回退到不透明度：X，相同的过滤器：下降阴影（）框阴影

问题是，放置新旧版本的常规CSS回退策略失败。通常新（如果支持）会覆盖旧的。但在这种情况下，新老是完全不同的属性，将结合！ CSS声明...

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

...将导致25％的不透明度，而不是50％。

实施例：https://jsfiddle.net/uq4ybvk8/

是否有任何方式（优选地仅CSS）来创建从沿用已久的CSS属性的新的过滤器性能的回退？

来源

2015-10-14 Jpsy

没有必要同时使用'opacity'和'filter：opacity' ....'opacity'不会去任何地方。 'filter：opacity' is * only another option * and they are not ** exactly ** interchangeable。如果这确实是一个问题，我怀疑你需要使用像[** Modernizr **]（https://modernizr.com/）这样的功能检测。 –

@Paulie_D：请阅读我的文字。我已经清楚地说明了我想使用filter：opacity，因为它比opacity（硬件加速）更具性能优势。我有一个真实的用例，其中对高分辨率图像施加的不透明度和框阴影确实会导致Android Chrome浏览器（可能受益于硬件加速）的性能问题。 – Jpsy

然后，您需要使用上述功能检测。 –

对于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-18 20:14:43 Emil

这是一个非常有趣的选项，我没有意识到。不幸的是，它不适用于大量较旧的Safari版本，但我仍将它标记为已接受的答案。 – Jpsy

CSS3过滤器：不透明度（X）与回退到不透​​明度：X，相同的过滤器：下降阴影（）框阴影

回答

相关问题

CSS3过滤器：不透明度（X）与回退到不透明度：X，相同的过滤器：下降阴影（）框阴影