ぼかしフィルターが子要素に影響を与えないようにするにはどうすればよいですか?

子要素のぼかし効果を削除する方法

親要素にぼかしフィルターを適用すると、子要素に次のような影響が及ぶことがあります。良い。この望ましくない影響を防ぐための賢い解決策には、親要素内に追加の div を作成することが含まれます。

解決策:

1. オーバーレイ Div:

   ぼかし効果と一致する背景画像を持つ親要素内に div をネストします。親 div よりも低い Z インデックスを割り当てます。

   <code class="html"><div class="content">
       <div class="overlay"></div>
       <div class="opacity">...</div>
   </div></code>

2. オーバーレイ Div にぼかし効果を適用します:

   ぼかし効果を適用しますCSS を使用して親 div の代わりにオーバーレイ div に追加します:

   <code class="css">.content .overlay {
       background-image: url('...');
       -webkit-filter: blur(3px);
       -moz-filter: blur(3px);
       -o-filter: blur(3px);
       -ms-filter: blur(3px);
       filter: blur(3px);
       z-index: 0;
   }</code>

3. Position Opacity Div in Front:

   不透明 div は次のようにする必要があります。より高い Z インデックスを持つオーバーレイ div の前に配置されます。

   <code class="css">.opacity {
       z-index: 10;
   }</code>

このアプローチの利点:

• ぼかし効果はオーバーレイ div 内に含まれており、子要素に影響を与えません。
• 不透明度 div を使用すると、ぼかし効果を妨げることなく、コンテンツの不透明度やその他のプロパティを制御できます。

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