锋利的边缘上模糊的背景

Question

对于我目前正在处理的网站，我需要一个背景模糊的标题。我使用css ::before来做到这一点，但我需要保留锋利的边缘。

以下是我目前的情况：

（您可能需要以全屏方式打开它以查看模糊的边缘。）

我现在的代码是：（View on CodePen）

＆＃13;

＆＃13;

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

header {
  width: 100%;
  min-height: 60%;
  padding: 50px 100px;
  text-align: center;
  color: white;
}

header nav ul {
  list-style: none;
}

header nav li {
  display: inline-block;
  padding: 5px;
}


/* Header background */

.header::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  content: '';
  display: block;
  min-height: 60%;
  width: 100%;
  background: url(https://placeimg.com/1000/662/any) no-repeat fixed top;
  -webkit-filter: blur(5px) contrast(125%) brightness(75%);
          filter: blur(5px) contrast(125%) brightness(75%);
}

＆＃13;

<header class="header">
  <nav>
    <ul>
      <li>Lorem</li>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </nav>
  <h1>Title</h1>
  <p>Lorem ipsum dolor osit amet, consectetur adipiscing elit.</p>
</header>

＆＃13;

＆＃13;

＆＃13;

虽然我希望它看起来像这样：

我尝试添加一个容器div，设置为overflow: hidden，这样我就可以使背景略大一些，因此它会被剪裁，并且会隐藏毛边，但这并不起作用。我还要不必须有一个不必要的div，因为这是我使用::before作为背景图片的全部原因。

我无法想到任何其他解决方案，我可以找到的关于如何在模糊滤镜上获得锐利边缘的所有解决方案都适用于图像，并且不适用于背景图像，所以我怎么能去关于这样做？

Answer 1

我不确定是否有正确的解决方法。模糊滤镜会影响整个元素，包括边缘。您可以通过使元素大于其容器来隐藏边缘，而父级获取overflow:hidden; - 请参阅演示：

* { padding: 0; margin: 0; box-sizing: border-box; }

html, body { height: 100%; }

.blurred {
  height:100%;
  width:50%;
  position: relative;
  float:left;
  margin:0 auto;
  overflow:hidden;
  border:3px solid #FFF;
  padding:1em;
  color:#FFF;
}

.blurred:before {
  background: url(https://placeimg.com/1000/662/any) no-repeat fixed top;
  background-size:cover;
  -webkit-filter: blur(5px) contrast(125%) brightness(75%);
  filter: blur(5px) contrast(125%) brightness(75%);
  content:"";
  height: 110%; width: 110%;
  display: block;
  position: absolute;
  z-index:-1;
  top:0; left:0;
}

.blurred.scaled:before {transform:scale(1.1);}

<div class="blurred scaled">
Scaled background
</div>

<div class="blurred">
Normal background
</div>

<强> jsFiddle