ぼやけた背景を維持しながら子要素から背景のぼかしを削除するにはどうすればよいですか?

子要素から背景のぼかしを削除

があります。背景画像にぼかし効果を適用したもの。ただし、すべての子要素もこのぼやけの影響を受けるため、望ましくないことになります。この記事では、この問題を解決する解決策を提供します。これにより、子要素の鮮明さを維持しながら、背景画像のぼかし効果を維持できるようになります。

解決策: オーバーレイ要素を作成する

これを実現するには、別の

を作成します。親要素内で背景画像とぼかし効果をこの新しい要素に適用します。次に、z-index 値を使用して、この要素を既存の子要素の後ろに配置します。

変更された HTML 構造は次のとおりです。

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="/static/imghwm/default1.png" data-src="images/zwemmen.png" class="lazy" 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>

この設定では、.overlay 要素にはぼかし効果が適用されますが、.opacity 要素はこの効果が子要素に到達するのをブロックするため、ぼやけた背景の上にシャープで焦点の合った子要素が表示されます。

以上がぼやけた背景を維持しながら子要素から背景のぼかしを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。