如何在叠加

Question

我的网站上有CSS模糊效果的问题，因为当我想在我的页面上的div上设置此效果时，它无法正常工作且div有一个模糊奇怪的内部阴影效果，此图片显示问题：

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

守则：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

filter: blur()属性仅模糊应用的元素。所以你的黑色叠加元素试图模糊那个黑色，因此阿尔法在创建一个晕影效果时爬行。

要模糊背景元素，您可能希望将模糊直接应用于这些元素，但这可能会非常难以维护，具体取决于重叠弹出窗口的模块性。

Answer 2

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

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

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

这是迄今为止最常用的方法。将页面的所有内容（模式框及其背景除外）包含在另一个元素（我们最喜欢的：<div>）中，然后对其应用CSS模糊过滤器。这个技巧享有80.47% global support。

.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% global support。声明非常简单，并按预期工作。我为那些浏览器不支持该属性的人附上了截图：



.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>