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

回答

相关问题