前景のコンテンツに影響を与えずに、CSS で背景画像をぼかすにはどうすればよいでしょうか?

CSS で背景をぼかす: コンテンツのぼやけを避ける

背景をぼかすと、Web サイトの美しさが向上し、重要なコンテンツに注目が集まることができます。しかし、ぼかしがコンテンツ自体に意図せず影響を与えたらどうなるでしょうか?

この例では、span 要素内の前景テキストの明瞭さを維持しながら、背景画像をぼかす試みが行われます。これを達成するには、CSS を戦略的に使用できます。

重要なテクニックには、:before 疑似クラスを利用して背景画像を継承することが含まれます。クラス「blur-bgimage」を持つ新しい div 要素が導入され、:before 疑似クラスが追加されます。この疑似要素は、background:inherit プロパティを使用して背景画像を継承します。

次に、:before 疑似要素は、CSS フィルターを使用して効果的にぼかされます。これらのフィルター (この場合は blur(10px)) を組み込むことにより、背景画像に目的のぼかし効果が与えられます。

次に、「.blur-bgimage」 div に overflow: hidden が割り当てられ、ぼかした領域を隠します。 div の境界。マージン、テキストの配置、Z インデックスも適切に設定されます。

ぼかし効果を切り替えるには、提供されている jsfiddle の例で示されているように、JavaScript を使用して「.blur-bgimage」クラスを追加または削除できます。 。この方法を使用すると、コンテンツの鮮明さを損なうことなく、背景のぼかし効果を動的に制御できます。

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