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

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

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

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

以下はコード例です:

.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;
}

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