子要素に影響を与えずに親 DIV の背景をぼかすにはどうすればよいですか?

子要素に影響を与えずに DIV 背景をぼかす (絶対配置を避ける)

ぼかしまたは不透明効果を親 DIV 要素に適用すると、子要素にも影響します。これを回避するには、創造的な解決策が必要です。

代替解決策

親コンテナ内に 2 つの子 DIV を作成します:

• 背景 DIV: 親内に絶対的に配置されます (上:0px; 右:0px; Bottom:0px; left:0px; または 100% 幅/高さ)
• コンテンツ DIV: 背景 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 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div><p>このアプローチでは、背景がぼかされてもコンテンツ DIV は影響を受けません。</p></div>

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