模糊背景上的尖銳邊緣

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