ホームページ > 記事 > ウェブフロントエンド > コンテンツの鮮明さに影響を与えずに背景画像をぼかすにはどうすればよいですか?
コンテンツに影響を与えずに背景画像のぼかしを作成する
この例の目標は、画像の鮮明さを損なうことなく背景画像をぼかすことです。コンテンツ (この場合は、span 要素)。
問題
CSS を使用して背景画像にぼかし効果を適用すると、要素内のコンテンツもぼやけてしまいます。これにより、テキストやその他のコンテンツの可読性を維持するという課題が生じます。
解決策
望ましい効果を達成するには、CSS 疑似クラスを利用できます。 :before 疑似クラスは、このシナリオに最適です。その方法は次のとおりです:
<code class="html"><div class="blur-bgimage"> <span>Main Content</span> </div></code>
<code class="css">.blur-bgimage:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: inherit; z-index: -1; filter: blur(10px); // Adjust the blur radius as desired transition: all 2s linear; }</code>
これこのメソッドは、要素内のコンテンツの鮮明さを維持しながら、背景画像を効果的にぼかします。
以上がコンテンツの鮮明さに影響を与えずに背景画像をぼかすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。