cssフィルタ：ぼかしガラス効果が働かない、ぼかしがない、内容に影響を及ぼす

Question

divの前に背景の写真がありたい。 divには、ぼんやりした暗い背景と白いテキストが必要です。

しかし、現時点では、ぼやけや暗いテキストのない暗い背景があります。 私を助けてください！

#section0 { 
 
background-color: lightgreen; /*normally the photo*/ 
 
} 
 

 
.blurwrapper { 
 
position: relative; 
 
overflow: hidden; 
 
} 
 

 
.blur { 
 
position: absolute; 
 
top: 0; 
 
left: 0; 
 
width: 100%; 
 
height: 100%; 
 
background: black; 
 
filter: blur(1px); 
 
opacity: 0.2; 
 
transform: scale(1.5); 
 
z-index: 1; 
 
} 
 

 
h1 { 
 
color: white; 
 
} 
 
.about { 
 
color: white; 
 
background: none; 
 
margin: auto; 
 
margin-top: 20px; 
 
max-width: 800px; 
 
font-size: 15px; 
 
padding: 20px; 
 
text-align: center; 
 
letter-spacing: 2px; 
 
color: white; 
 
border-top: 1px solid white; 
 
z-index: 2; 
 
}

<div class="section active" id="section0"> 
 
    <div class="blurwrapper"> 
 
     <h1><span>...</span></h1> 
 
     <p class="about">...</p> 
 
     <div class="blur"></div> 
 
    </div> 
 
</div>

Answer 1

あなたが見ることができるようにぼかしフィルタは、現在の要素に適用されます。 これは、イメージをぼかしたい場合は、background-imageが設定された#section0コンテナにぼかしを適用する必要があることを意味します。画像の代わりに色がある場合は、境界線だけがぼやけて見えます。

詳細については、ドキュメントをご覧ください。

https://developer.mozilla.org/en-US/docs/Web/CSS/filterはあなたのコードを使用して、より明確な例を挙げれば：http://codepen.io/ThePeach/full/egYbbe/