CSSのみを使用して子要素に影響を与えずに親Divの背景をぼかす方法は?

子要素に影響を与えずに親 Div をぼかす方法 (CSS のみの解決策)

ぼかしや不透明度などの CSS フィルターをオブジェクトに適用する場合親 div、その中の子要素も影響を受ける可能性があります。絶対配置を使用せずにこの問題を解決するには、次の解決策を検討してください:

背景とコンテンツに個別の Div を作成する:

1. 親 div 内に 2 つの div を作成する: 1 つは背景画像用、もう 1 つはコンテンツ用です。
2. 位置の割り当て: 親を基準とした相対位置div.

背景 Div の絶対位置:

1. 位置の割り当て: 絶対。トップ: 0;右: 0;下: 0;左: 0;
2. これにより、背景 div が親 div 全体をカバーするようになります。

背景 div にぼかしを追加:

1. フィルター:blur() プロパティを背景に適用します。 div.
2. Z インデックスを負の値 (-1 など) に設定して、コンテンツの後ろに配置します。 div.

例:

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

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

<div>

このメソッドを使用すると、子 div に影響を与えることなく、背景画像をぼかすことができます。コンテンツ。

以上がCSSのみを使用して子要素に影響を与えずに親Divの背景をぼかす方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。