ぼやけた背景を維持しながら子要素から背景のぼかしを削除するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Susan Sarandon

Oct 25, 2024 am 02:20 AM

How to Remove Background Blur from Child Elements While Maintaining Blurred Background?

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

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

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

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

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

変更された 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>

ログイン後にコピー

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。