CSS3技巧: blur entire webpage but without softened borders?

Question

当将 CSS3 blur: 5px; 应用到我的网页时，整个页面周围有白色的光芒。我找到了一些关于页面上图像或元素的解决方案，其中图像或元素可以被第二个 div 屏蔽，并且内容可以放大一点并模糊以摆脱这个问题。

但是，由于我将此效果应用于整个网页，因此这是行不通的。

我正在寻找一种技巧，可以将页面的每个元素保持在同一位置(因为单击按钮时会应用模糊效果)，但我希望整个页面及其边框都是模糊的 – 没有软边缘。

.blur {
     filter: blur(5px);
    -webkit-filter: blur(5px);
    -ms-filter: blur(5px);
    -moz-filter: blur(5px);
}

这是我的意思的快速模型...... http://jsfiddle.net/z926s7f3/1/

Answer 1

您走在实现所需目标的正确路径上，但技巧是将模糊过滤器应用于单个元素而不是容器。这将导致仅内容模糊，但边界不模糊。

我使用 #container * 作为选择器，因为我预计容器内会有多个内容元素，并且很难一一提及它们。

$('a').on('click', function(e) {
  e.preventDefault();
  $('#container *').toggleClass('blur');
});

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#container {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
}
h1,
p {
  color: #fff;
}
.blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  -moz-filter: blur(5px);
}
a {
  display: inline-block;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1 id="something">Headline</h1>
  <p>
    <a href="#">Blur this page</a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo Reges: constructio interrete. Quid dubitas igitur mutare principia naturae? De illis, cum volemus. Sed quae tandem ista ratio est? Satisne vobis videor pro meo iure in vestris auribus commentatus?
    Ut pulsi recurrant?</p>
</div>

---

如果您觉得上述内容在边界模糊方面不太符合要求，那么您可以向容器添加一个半径较小的额外模糊滤镜。这会使边界看起来模糊，但由于偏差很小，边缘看起来几乎很清晰。

$('a').on('click', function(e) {
  e.preventDefault();
  $('#container').toggleClass('container-blur');
  $('#container *').toggleClass('blur');
});

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#container {
  margin: 0;
  padding: 0;
  background: #000;
  width: 100%;
  height: 100%;
}
h1,
p {
  color: #fff;
}
.blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  -moz-filter: blur(5px);
}
.container-blur {
  filter: blur(1px);
  -webkit-filter: blur(1px);
  -ms-filter: blur(1px);
  -moz-filter: blur(1px);
}
a {
  display: inline-block;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1 id="something">Headline</h1>
  <p>
    <a href="#">Blur this page</a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo Reges: constructio interrete. Quid dubitas igitur mutare principia naturae? De illis, cum volemus. Sed quae tandem ista ratio est? Satisne vobis videor pro meo iure in vestris auribus commentatus?
    Ut pulsi recurrant?</p>
</div>

---

或者，您甚至可以将容器放入具有 overflow: hide 设置的单独包装器中。溢出会阻止软边缘显示。

$('a').on('click', function(e) {
  e.preventDefault();
  $('#container').toggleClass('blur');
});

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#container,
#wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#wrapper {
  overflow: hidden;
}
#container {
  background: #000;
}
h1,
p {
  color: #fff;
}
.blur {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -ms-filter: blur(5px);
  -moz-filter: blur(5px);
}
a {
  display: inline-block;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="container">
    <h1 id="something">Headline</h1>
    <p>
      <a href="#">Blur this page</a>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo Reges: constructio interrete. Quid dubitas igitur mutare principia naturae? De illis, cum volemus. Sed quae tandem ista ratio est? Satisne vobis videor pro meo iure in vestris auribus commentatus?
      Ut pulsi recurrant?</p>
  </div>
</div>