CSS3模糊覆蓋

我正在嘗試創建將覆蓋整個網站頁面並覆蓋它背後的所有內容的覆蓋圖。我搜索瞭解決方案，嘗試了多個版本與CSS3模糊過濾器，但沒有成功。主要問題是身體標記有背景時，它不是模糊的。CSS3模糊覆蓋

玩具例子：

body 
 
{ 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/8/8a/Too-cute-doggone-it-video-playlist.jpg"); 
 
    
 
} 
 

 
h1 
 
{ 
 
    text-align: center; 
 
} 
 

 
#overlay 
 
{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    -webkit-filter: blur(10px); 
 
}

<html> 
 
<head></head> 
 
<body> 
 
    <h1> 
 
    Text 
 
    </h1> 
 
    
 
    <div id="overlay"> 
 
     overlay 
 
    </div> 
 
</body> 
 
</html>

我想嘗試模糊的背後覆蓋DIV一切。如果我向h1添加模糊（或者如果我將其包裹在其他div中並在該div上添加模糊），我可以達到解決方案附近，但沒有背景模糊。

有沒有可以滿足所有要求的解決方案？

想法是創建一個JavaScript文件，這將以編程方式執行此操作，以便我可以在多個頁面上使用。

來源

2017-06-06 Boris

那麼你想讓背景圖像變得模糊嗎？ –

看看這裏：https：//gordonlesti.com/css-blur-overlay/ – Gerard

https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to -a-background-image –

您可以使用filter財產與blur，雖然它沒有廣泛支持：http://jsfiddle.net/GkXdM/1/。它在Chrome上受到支持，但在整個頁面上使用時性能會受到很大影響。

body { 
    filter: blur(2px); 
}

或者你可以只使用一個div這是全屏幕（就像你），只是調整z-index。儘管如此，我不會建議在背景上添加背景。沒有理由。

來源

2017-06-06 20:15:03 jdmdevdotnet

我試過了，但它模糊了一切，我想離開div。 – Boris

CSS3模糊覆蓋

回答

相關問題