CSS：背景濾鏡的解決方法？

backdrop-filter是最近的css特性，在現代瀏覽器中尚不可用（至少截至2016年7月1日）。CSS：背景濾鏡的解決方法？

Chrome 51支持backdrop-filter通過實驗性Web平臺標誌。
的Safari 9.1 --webkit-前綴支持它
火狐47不支持

作爲在這樣一個不穩定的狀態，我想知道是否存在任何替代方式，在相同的結果帶來。

JS的解決方法模糊，灰度，......也歡迎

的backdrop-filter發展可以通過https://bugs.chromium.org/p/chromium/issues/detail?id=497522

來源

2016-07-01 Afrish Khan

可以請你正好指定你想要的闡述或解釋新功能 –

@SrikerCh模糊，灰度濾鏡 –

跟蹤你可以嘗試不同的過濾器添加到背景圖片：

https://css-tricks.com/almanac/properties/f/filter/

這個問題的不利之處在於它只適用於圖像。

基本上，存在對於CSS filter屬性10內置過濾器：

模糊（PX）
亮度（％）
對比度（％）
下拉陰影（ H-陰影v-陰影模糊擴展顏色）
灰度（％）
色調旋轉（度）
反轉（％）
不透明度（％）
飽和（％）
棕褐色（％）

，另外，你可以提供給它的URL，至極包含與appropariate一個XML文件過濾。

來源

2016-07-02 12:43:43

但是，唐不能取代背景幕可以做什麼... –

我不知道，如果你還在追逐着這個問題，但在今後的其他用戶：

此效果可以用CSS僞類如下實現，沒有JavaScript是必要的！如下圖所示：

body, 
 
main::before { 
 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0/cover fixed; 
 
} 
 

 
main { 
 
    margin: 100px auto; 
 
    position: relative; 
 
    padding: 10px 5px; 
 
    background: hsla(0, 0%, 100%, .3); 
 
    font-size: 20px; 
 
    font-family: 'Lora', serif; 
 
    line-height: 1.5; 
 
    border-radius: 10px; 
 
    width: 60%; 
 
    box-shadow: 5px 3px 30px black; 
 
    overflow: hidden; 
 
} 
 

 
main::before { 
 
    content: ''; 
 
    margin: -35px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    filter: blur(20px); 
 
    z-index: -1; 
 
}

<main> 
 
    <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45; 
 
    even those we love. Because we see things so often, we see them less and less." 
 
    <footer>&mdash; 
 
     <cite> 
 
     Joseph B. Wirthlin 
 
     </cite> 
 
    </footer> 
 
    </blockquote> 
 
</main>

活生生的例子就可以看出Codepen：https://codepen.io/jonitrythall/pen/GJQBOp

快速注：

根據您已經設置了網站的結構，你的Z-Index可能與實施例中所述的不同mple。

來源

2016-07-23 14:45:53 Krono

良好的解決方法。但有一個回退，因爲背景中的其他元素不會模糊。 –

唯一的問題是它不是動態的。它綁定到一個靜態圖像。但是，針對該特定情況的良好解決方法:) – jaminroe

我用這個來獲得流行的磨砂玻璃效果。直到有人成功地發明了backdrop-filter我使用的是略透明背景作爲後備良好的填充工具：

/* slightly transparent fallback */ 
.backdrop-blur { 
    background-color: rgba(255, 255, 255, .9); 
} 

/* if backdrop support: very transparent and blurred */ 
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) { 
    .backdrop-blur { 
    background-color: rgba(255, 255, 255, .5); 
    -webkit-backdrop-filter: blur(2em); 
    backdrop-filter: blur(2em); 
    } 
}

過濾器將在currently supported瀏覽器。（啓用了實驗性Web平臺功能的Safari和Chrome）如果規範在此之前沒有更改，代碼也可以在未來支持前綴backdrop-filter的瀏覽器中使用。

例子，而不與背景過濾器支持：

來源

2017-06-05 09:48:34 Duvrai

我在網上找到的解決方案只包含*兩種*瀏覽器，它們不支持模糊效果。謝謝！ – LinusGeffarth

CSS：背景濾鏡的解決方法？

回答

相關問題