子要素が親の CSS ぼかし効果を継承しないようにするにはどうすればよいですか?

CSS のぼかしの問題: 親のぼかし効果から子要素を除外する

CSS を使用して親要素にぼかしフィルターを適用する場合、子要素もその効果を継承することは避けられません。 。ただし、絶対配置を使用せずに子要素をこの不鮮明さから除外する解決策があります。

これを実現するには、親 div 内に 2 つのネストされた div を作成します。1 つは背景用、もう 1 つはコンテンツ用です。親 div に「position:relative」を割り当て、「position:absolute; top:0px; right:0px;bottom:0px; left:0px;」を割り当てます。 (または高さ/幅を 100% に設定) を背景 div に設定します。これにより、背景 div が親 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;
}

<div></div>

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