親要素にぼかし効果を適用するときに子要素を鮮明に保つにはどうすればよいですか?

ぼかした背景の下で子要素を鮮明に保つ

ぼかし効果を親要素に適用すると、この効果が親要素にも及ぶ可能性があります。子要素の内容が見えにくくなります。子要素のこの望ましくないぼやけを防ぐための解決策が存在します。

親要素内に新しい div を作成し、それにぼかし効果のある背景画像を割り当てます。この div にオーバーレイよりも低い z-index を指定して、子要素の後ろに配置します。次のコード構造を使用します:

<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">
            <!-- Information content -->
        </div>
    </div>
</div></code>

不透明度 div には影響を与えずに、ぼかし効果をオーバーレイ div に適用します。 CSS コード:

<code class="css">.content .overlay {
    background-image: url('images/zwemmen.png');
    -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);
    z-index: 10;
}</code>

以上が親要素にぼかし効果を適用するときに子要素を鮮明に保つにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。