WebKit-like磨砂玻璃在其他瀏覽器

WebKit的backdrop-filter已被證明是非常有用的。我用它來創建一個我一直在研究的設計的演示，它高度依賴於「磨砂玻璃」美學，但很驚訝地發現它具有最小的跨瀏覽器支持，只能在Safari上工作，除非實驗模式在Opera或Chrome中啓用。WebKit-like磨砂玻璃在其他瀏覽器

我希望我的設計能夠在各種瀏覽器中正常工作，所以我研究了一些用於創建磨砂玻璃模糊的其他解決方案。到目前爲止，我遇到過有關如何模糊圖像或視頻的文章和Stack Overflow問題，但一直無法找到任何可能模糊div部分的解決方案。 -webkit-filter已經跨越了幾個瀏覽器，但並沒有解決我的問題，因爲我只需要模糊div的特定部分，而不是整個div。

我創建了a demo of the background blur我準備好了。如前所述，它目前只能在Safari中運行。有沒有什麼方法可以在其他瀏覽器中按照以下要求重新創建？

不強迫用戶在Chrome中啓用「實驗性功能」或Opera
不需要編程服用區域的截圖模式背後（見演示了模態應該是什麼樣子的例子）和然後用SVG濾鏡模糊他們
響應
具有最佳的跨瀏覽器支持

編輯：爲了證明什麼，我指的是，這裏是做或不做什麼想什麼，我實現兩個圖像：

不正確（從我的演示，在維瓦爾第（鉻所示）瀏覽器）：在此設置中，沒有模糊;只有一個透明的覆蓋。

正確（從我的演示中，在Safari中所示）：在此設置中，模態窗口只模糊的項目直接在它後面，而不是模糊整個div秒。

我也很好奇SVG解決方案是否可以工作，如果沒有其他可行的話。我使用SVG編輯器來創建我的模型，並且能夠使用該軟件執行背景模糊，所以我想知道如果在SVG中編寫我的整個網頁將是不切實際但合適的解決方案。

來源

2017-06-13 jmindel

下面介紹如何使用SVG濾鏡對選區進行不透明模糊處理。您將使用filter: url(#frost-me);來應用HTML內容。這是跨瀏覽器，但有兩個例外：Edge/IE，您必須在Firefox中使用SVG &。爲了讓它在firefox中工作，你需要用內嵌的svg/xml數據URI替換feImage對象引用，因爲firefox不支持feImage中的對象引用。另外 - 動畫這將需要JavaScript。

<svg width="0" height="0"> 
    <defs> 
    <rect id="frosty-area" rx="10" ry="10" fill="red" x="460" y="100" width="400" height="300"/> 
    <filter id="frost-me" x="0%" y="0%" width="100%" height="100%"> 
     <feImage xlink:href="#frosty-area"/> 
     <feComposite operator="in" in="SourceGraphic" result="selection"/> 
     <feGaussianBlur stdDeviation="10"/> 
     <feComponentTransfer> 
     <feFuncA type="discrete" tableValues="1 1"/> 
     </feComponentTransfer> 
     <feComposite operator="in" in2="selection"/> 
     <feComposite operator="over" in2="SourceGraphic"/> 
    </filter> 
    </defs> 
</svg>

快速演示 - 只是把它進入人體CSS：https://codepen.io/mullany/pen/mwrejb

來源

2017-06-14 03:30:36

WebKit-like磨砂玻璃在其他瀏覽器

回答

相關問題