子要素をぼかさずに Div の背景をぼかすにはどうすればよいですか?

子要素に影響を与えずに Div をぼかす: ガイド

多くの場合、div にぼかしを適用するときに、ユーザーは意図せずに次のような課題に遭遇します。子要素もぼかします。この問題に対処するには、CSS のぼかしプロパティと不透明プロパティの制限を理解することが重要です。デフォルトでは、これらのプロパティは、内部の親要素と子要素の両方に影響します。

代替解決策: コンテンツと背景を分離する

子要素がぼやけるのを避けるための実行可能な解決策は、次のとおりです。親 div 内に 2 つの別々の要素を作成します。1 つは背景用、もう 1 つは背景用です。 content.

実装:

1. 親 div の位置を「相対」に設定します。
2. 背景の子要素を作成し、設定します位置を「絶対」に設定し、上、右、下、左の値を 0 に設定します (または、高さと幅を に設定します)。 100%)。
3. 背景の子要素にぼかしまたは不透明度のプロパティを適用します。

この方法で背景を分離すると、コンテンツの子要素はぼかしの影響を受けなくなります。または親に適用される不透明度div.

例:

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

#content {
  /* Content properties here */
}

<div>

以上が子要素をぼかさずに Div の背景をぼかすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。