コンテンツをぼかさずにCSSで背景画像をぼかすにはどうすればよいですか?

コンテンツの明瞭さを維持しながら背景画像を CSS でぼかす

CSS 設定で背景画像をぼかそうとすると、一般的に次のような問題が発生します。コンテンツ (テキストまたはその他の要素) もぼやける問題。ここで、z-index と擬似要素の概念が登場します。

コンテンツに影響を与えずに背景画像をぼかすには、次のアプローチを使用できます:

1. 背景用のコンテナの作成: 背景画像を div または他のコンテナ内に囲み、「blur-bgimage」などのクラスを割り当てます。
2. 擬似要素の導入: 「blur-bgimage」クラス内に、:before のような疑似クラスを追加します。これにより、背景画像を継承するコンテナの背後にレイヤーが作成されます。
3. 背景をぼかす: CSS フィルターを使用して、擬似要素にぼかし効果を適用します。これにより、コンテンツに影響を与えることなく、継承された背景画像がぼかされます。
4. コンテンツのオーバーレイ: コンテンツを「blur-bgimage」コンテナ内に配置し、より高い Z インデックス (例: 、z-index: 1) は、ぼやけた背景 (z-index: 0) よりも大きくなります。

以下はコード例です:

<code class="css">.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}</code>

このアプローチを実装すると、次のことができます。コンテンツの鮮明さを維持しながら背景画像を効果的にぼかし、視覚的に魅力的な Web サイトのデザインを可能にします。

以上がコンテンツをぼかさずにCSSで背景画像をぼかすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。