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

CSS を使用して子要素のぼかし効果を削除する

親要素に CSS ぼかし効果を使用する場合、子要素もぼかしを継承するという問題がよく発生します。これを解決するには、親内に別の div を作成し、代わりにぼかし効果をそれに適用します。

実装

1. コンテンツ div 内に追加の div を追加し、それに割り当てます。

<code class="html">&lt;div class=&quot;content&quot;&gt;
  &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;
  &lt;div class=&quot;opacity&quot;&gt;
    &lt;!-- Child elements... --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>

2. CSS で、ぼかし効果と背景画像をオーバーレイ div に割り当て、その z-index が不透明 div よりも低いことを確認します。

<code class="css">.content {
  float: left;
  width: 100%;
}

.content .overlay {
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  z-index: 0;
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 10;
}</code>

オーバーレイ div に低い z-index を与えると、不透明 div 内の子要素がその上に配置され、ぼかし効果の影響を受けなくなります。

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