コンテンツの鮮明さに影響を与えずに背景画像をぼかすにはどうすればよいですか?

コンテンツに影響を与えずに背景画像をぼかす

視覚的に魅力的なデザインを作成しようとして、開発者は背景画像をぼかすときに課題に遭遇することがよくあります。ウェブページの。ただし、画像をぼかすと、メインのコンテンツ (テキストや要素) にも影響が及ぶことがよくあります。ここで疑問が生じます: コンテンツの鮮明さを犠牲にせずに背景画像をぼかすにはどうすればよいでしょうか?

解決策は、CSS と JavaScript を利用して、コンテンツ レイヤーを明確に保ちながら、ぼかした背景用に別のレイヤーを作成することです。完全なコード スニペットは次のとおりです。

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

このコード スニペットは、背景画像を継承する疑似要素 (:before) を作成します。この疑似要素を絶対位置に配置することで、ぼかした背景用に別のレイヤーを作成します。ぼかし効果は、filter プロパティを使用して適用されます。

背景をぼかすには、「blur-bgimage」クラスを目的の要素に追加するだけです。ぼやけを削除するには、クラスを削除します。 JavaScript を使用してクラスを動的に追加および削除し、ぼかし効果を動的に制御できます。

この手法を実装すると、Web サイトのコンテンツの明瞭さを維持しながら、背景をぼかした画像を使用した視覚的に素晴らしいデザインを作成できます。 .

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