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

コンテンツに影響を与えずに背景画像のぼかしを作成する

この例の目標は、画像の鮮明さを損なうことなく背景画像をぼかすことです。コンテンツ (この場合は、span 要素)。

問題

CSS を使用して背景画像にぼかし効果を適用すると、要素内のコンテンツもぼやけてしまいます。これにより、テキストやその他のコンテンツの可読性を維持するという課題が生じます。

解決策

望ましい効果を達成するには、CSS 疑似クラスを利用できます。 :before 疑似クラスは、このシナリオに最適です。その方法は次のとおりです:

1. 特定のクラス内でコンテンツをラップします (例: "blur-bgimage"):

<code class="html"><div class="blur-bgimage">
  <span>Main Content</span>
</div></code>

2. のスタイルを設定します:クラス内の before 疑似要素で背景画像を模倣し、ぼかし効果を適用します。

<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>

3. :before 疑似要素はコンテンツをオーバーレイし、背景画像を継承してぼかし効果を適用します。 。負の Z インデックスによりコンテンツの後ろに配置されます。
4. blur-bgimage クラスを親コンテナに追加するとぼかし効果がトリガーされ、削除すると元の鮮明さが復元されます。

これこのメソッドは、要素内のコンテンツの鮮明さを維持しながら、背景画像を効果的にぼかします。

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