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，相同的過濾器：下降陰影（）框陰影