如何在叠加层上产生模糊效果

Question

我的网站上的CSS模糊效果存在问题，因为当我要在页面上的div上设置此效果时，它无法正常工作，并且div具有模糊怪异的内部阴影效果，此图显示了该问题：

如您所见，模糊效果不起作用只是叠加框中的内部辉光或阴影。

编码：

 .overlay__board { background-color: rgba(0, 0, 0, 0.8); position: fixed; z-index: 99; height: 100%; width: 100%; display: block; top: 0px; left: 0px; filter: blur(17px); } .follow__board__popup { width: 791px; height: 626px; border: 1px solid #ccc; position: fixed; left: 0; right: 0; bottom: 0; top: 0; margin: auto; box-sizing: border-box; border-radius: 5px; background-color: #fff; z-index: 9999; } 

 <div class="overlay__board"></div> <div class="follow__board__popup"></div> 

https://jsfiddle.net/iklas/dzagx0y5/

Answer 1

filter: blur()属性仅模糊应用于该元素的元素。 因此，您的黑色叠加元素试图使该黑色模糊，因此，alpha在创建装饰图案效果时会逐渐蔓延。

要模糊背景元素，您可能希望将模糊直接应用到那些元素，但是根据叠加层弹出窗口的模块化，要维护它可能会非常麻烦。

Answer 2

如@elmarok的答案中所述， filter()属性适用于其内容，而不适用于其背后的元素。 有两种解决方案：

1. 包装非模式内容广告，然后应用filter
2. 解决方案2：使用backdrop-filter属性

解决方案1：包装非模式内容广告，然后应用filter

到目前为止，这是最常用的方法。 将页面的所有内容（模态框及其背景除外）包装到另一个元素（我们最喜欢的<div> ）中，然后对其应用CSS模糊过滤器。 此招获得全球80.47％的支持 。

 .overlay__board { background-color: rgba(0, 0, 0, 0.5); position: fixed; z-index: 99; height: 100vh; width: 100vw; display: block; top: 0px; left: 0px; } .follow__board__popup { width: 50%; height: 50%; border: 1px solid #ccc; position: fixed; left: 0; right: 0; bottom: 0; top: 0; margin: auto; box-sizing: border-box; border-radius: 5px; background-color: #fff; z-index: 9999; } .content { -webkit-filter: blur(5px); filter: blur(5px); } 

 <div class="overlay__board"></div> <div class="follow__board__popup"></div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus metus at mauris aliquam varius. Vivamus hendrerit, ante ac volutpat mattis, ante turpis scelerisque risus, a accumsan tortor leo sit amet magna. Fusce pellentesque eget nisl eu sodales. Aenean congue purus lectus, eu tristique mi eleifend eu. Proin vehicula, purus eu rutrum luctus, ex leo efficitur turpis, ac elementum urna massa vehicula erat. Nam eu lorem non enim pretium porta. Morbi posuere velit id egestas tristique. Aliquam efficitur vehicula ante in ornare. Fusce scelerisque facilisis mi, sit amet facilisis sapien tempus vitae. Phasellus vulputate feugiat leo, pretium pharetra magna mattis ac. Vivamus ultricies placerat faucibus. Duis vitae nulla id nisl gravida vehicula non non lectus. Praesent dui velit, consequat vel arcu ac, pellentesque consectetur lacus. Aenean pellentesque, eros sit amet sollicitudin molestie, nisl quam fringilla eros, non gravida felis risus non est.</p> <p>Nunc laoreet imperdiet ex, nec maximus ligula vestibulum sed. Phasellus mollis leo dapibus, hendrerit dolor eu, eleifend ipsum. Nunc feugiat, nisl ac rhoncus porta, libero eros consequat tortor, posuere convallis felis mi nec nulla. Maecenas ipsum neque, euismod ac risus vitae, gravida blandit urna. Nullam vestibulum porta pellentesque. Sed id mollis orci. Sed efficitur lorem vitae purus laoreet, eget aliquam dui pulvinar. Ut id sapien at neque porta mollis eget vitae elit. Nullam diam ex, commodo a tellus a, porttitor porta nisi. Ut sit amet tincidunt nisl. Ut non mi sed massa tincidunt gravida. Phasellus efficitur pharetra nunc ac venenatis. Duis dolor enim, aliquam eu tincidunt eu, scelerisque vitae metus. Nulla fringilla eu quam eget semper. Sed quis est in justo venenatis iaculis. Morbi ut rhoncus enim, imperdiet hendrerit elit.</p> <p>Proin blandit arcu ac vehicula blandit. Proin et velit sapien. Sed placerat elementum molestie. Vivamus porttitor cursus eros tincidunt molestie. Suspendisse aliquet metus mollis orci ornare iaculis. Sed vel lacus hendrerit, venenatis libero et, porta enim. Vestibulum hendrerit sed quam ut commodo. Suspendisse laoreet malesuada leo, sed aliquam est pellentesque sit amet. Vivamus sodales ullamcorper felis. Suspendisse potenti. Morbi eget libero in velit consectetur sagittis non sed ipsum. Quisque mauris quam, mattis quis nulla eget, rhoncus mollis tortor. Pellentesque fringilla consequat nisi egestas consectetur. Quisque consectetur facilisis sapien sit amet tincidunt. Nulla suscipit tempor lacus, nec fermentum quam efficitur ut.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras hendrerit sapien eros. Aenean turpis justo, varius ac orci sit amet, porta malesuada enim. Aliquam erat volutpat. Sed a ligula nec ligula rutrum congue. Integer sit amet vulputate nibh. Sed ac mollis ex, et ultricies diam.</p> <p>Aenean vestibulum in ex vitae tincidunt. Etiam dapibus varius est sit amet facilisis. Duis a neque mi. Maecenas tempor scelerisque mattis. Quisque sapien neque, scelerisque quis velit id, vulputate consectetur eros. Aliquam erat ipsum, ultrices vitae purus at, fringilla imperdiet sapien. Pellentesque in tellus eleifend, ullamcorper ipsum vel, auctor purus. Quisque porttitor eu nisl ut hendrerit. Morbi facilisis eleifend tempus. Sed hendrerit quam ac auctor semper. Vivamus lacinia eros nunc, quis volutpat odio rhoncus et. Maecenas hendrerit est sit amet hendrerit maximus. Proin condimentum quam fringilla augue condimentum lacinia. Vestibulum luctus urna vitae neque gravida, in rutrum mi tincidunt. Donec aliquam feugiat felis, eu ornare elit maximus sed.</p> </div> 

解决方案2：使用backdrop-filter属性

该技巧可完美地用于webkit浏览器，但仅适用于Safari和Google Canary的最新版本（Chrome到目前为止尚不支持）–仅有8.37％的全球支持 。 该声明非常简单，并且可以按预期工作。 我已为其浏览器不支持该属性的用户提供了屏幕截图：

 .overlay__board { background-color: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); position: fixed; z-index: 99; height: 100vh; width: 100vw; display: block; top: 0px; left: 0px; } .follow__board__popup { width: 50%; height: 50%; border: 1px solid #ccc; position: fixed; left: 0; right: 0; bottom: 0; top: 0; margin: auto; box-sizing: border-box; border-radius: 5px; background-color: #fff; z-index: 9999; } 

 <div class="overlay__board"></div> <div class="follow__board__popup"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus metus at mauris aliquam varius. Vivamus hendrerit, ante ac volutpat mattis, ante turpis scelerisque risus, a accumsan tortor leo sit amet magna. Fusce pellentesque eget nisl eu sodales. Aenean congue purus lectus, eu tristique mi eleifend eu. Proin vehicula, purus eu rutrum luctus, ex leo efficitur turpis, ac elementum urna massa vehicula erat. Nam eu lorem non enim pretium porta. Morbi posuere velit id egestas tristique. Aliquam efficitur vehicula ante in ornare. Fusce scelerisque facilisis mi, sit amet facilisis sapien tempus vitae. Phasellus vulputate feugiat leo, pretium pharetra magna mattis ac. Vivamus ultricies placerat faucibus. Duis vitae nulla id nisl gravida vehicula non non lectus. Praesent dui velit, consequat vel arcu ac, pellentesque consectetur lacus. Aenean pellentesque, eros sit amet sollicitudin molestie, nisl quam fringilla eros, non gravida felis risus non est.</p> <p>Nunc laoreet imperdiet ex, nec maximus ligula vestibulum sed. Phasellus mollis leo dapibus, hendrerit dolor eu, eleifend ipsum. Nunc feugiat, nisl ac rhoncus porta, libero eros consequat tortor, posuere convallis felis mi nec nulla. Maecenas ipsum neque, euismod ac risus vitae, gravida blandit urna. Nullam vestibulum porta pellentesque. Sed id mollis orci. Sed efficitur lorem vitae purus laoreet, eget aliquam dui pulvinar. Ut id sapien at neque porta mollis eget vitae elit. Nullam diam ex, commodo a tellus a, porttitor porta nisi. Ut sit amet tincidunt nisl. Ut non mi sed massa tincidunt gravida. Phasellus efficitur pharetra nunc ac venenatis. Duis dolor enim, aliquam eu tincidunt eu, scelerisque vitae metus. Nulla fringilla eu quam eget semper. Sed quis est in justo venenatis iaculis. Morbi ut rhoncus enim, imperdiet hendrerit elit.</p> <p>Proin blandit arcu ac vehicula blandit. Proin et velit sapien. Sed placerat elementum molestie. Vivamus porttitor cursus eros tincidunt molestie. Suspendisse aliquet metus mollis orci ornare iaculis. Sed vel lacus hendrerit, venenatis libero et, porta enim. Vestibulum hendrerit sed quam ut commodo. Suspendisse laoreet malesuada leo, sed aliquam est pellentesque sit amet. Vivamus sodales ullamcorper felis. Suspendisse potenti. Morbi eget libero in velit consectetur sagittis non sed ipsum. Quisque mauris quam, mattis quis nulla eget, rhoncus mollis tortor. Pellentesque fringilla consequat nisi egestas consectetur. Quisque consectetur facilisis sapien sit amet tincidunt. Nulla suscipit tempor lacus, nec fermentum quam efficitur ut.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras hendrerit sapien eros. Aenean turpis justo, varius ac orci sit amet, porta malesuada enim. Aliquam erat volutpat. Sed a ligula nec ligula rutrum congue. Integer sit amet vulputate nibh. Sed ac mollis ex, et ultricies diam.</p> <p>Aenean vestibulum in ex vitae tincidunt. Etiam dapibus varius est sit amet facilisis. Duis a neque mi. Maecenas tempor scelerisque mattis. Quisque sapien neque, scelerisque quis velit id, vulputate consectetur eros. Aliquam erat ipsum, ultrices vitae purus at, fringilla imperdiet sapien. Pellentesque in tellus eleifend, ullamcorper ipsum vel, auctor purus. Quisque porttitor eu nisl ut hendrerit. Morbi facilisis eleifend tempus. Sed hendrerit quam ac auctor semper. Vivamus lacinia eros nunc, quis volutpat odio rhoncus et. Maecenas hendrerit est sit amet hendrerit maximus. Proin condimentum quam fringilla augue condimentum lacinia. Vestibulum luctus urna vitae neque gravida, in rutrum mi tincidunt. Donec aliquam feugiat felis, eu ornare elit maximus sed.</p>