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」クラスを追加または削除できます。 。この方法を使用すると、コンテンツの鮮明さを損なうことなく、背景のぼかし効果を動的に制御できます。