CSS の子要素にぼかし効果が及ばないようにするにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS の子要素にぼかし効果が及ばないようにするにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-03 00:43:02

オリジナル

280 人が閲覧しました

How to Prevent Blur Effect from Extending to Child Elements in CSS?

子要素のぼかし効果をキャンセル

があります。ぼかした背景画像を使用しますが、ぼかし効果はその子要素にも適用されます。これに対処するには、次のアプローチを検討してください。

別の

を作成します。親 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 サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：HTML/CSS を使用して、子要素の可視性に影響を与えずにフェード背景を作成する方法次の記事：CSS グリッドを使用して行と列をまたぐにはどうすればよいですか?

このウェブサイトの声明

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

著者別の最新記事