模糊背景上的尖锐边缘

Question

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

这是我目前得到：

（您可能需要在全屏幕打开它，看看边缘模糊）

的什么我的代码现在的问题是：（View on CodePen）

* { 
 
    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%); 
 
}

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

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

我尝试添加一个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