ホームページ > 記事 > ウェブフロントエンド > CSS の子要素にぼかし効果が及ばないようにするにはどうすればよいですか?
CSS の子要素にぼかし効果が及ばないようにするにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-11-03 00:43:02176ブラウズ
子要素のぼかし効果をキャンセル
があります。ぼかした背景画像を使用しますが、ぼかし効果はその子要素にも適用されます。これに対処するには、次のアプローチを検討してください。
別の
を作成します。親 div 内で背景画像とぼかし効果を割り当てます。この div の z-index が不透明 div よりも低いことを確認してください。
HTML:
<code class="html"><div class="content">
<div class="overlay"></div>
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div></code>
CSS:
<code class="css">.content {
float: left;
width: 100%;
}
.content .overlay {
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
z-index: 0;
}
.opacity {
background-color: rgba(5, 98, 127, 0.9);
height: 100%;
overflow: hidden;
position: relative;
z-index: 10;
}</code>
これにより、
が作成されます。子要素には影響を与えずに、ぼかした背景画像が含まれます。
以上がCSS の子要素にぼかし効果が及ばないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。