如何防止模糊濾鏡影響子元素？

如何刪除子元素上的模糊效果

將模糊濾鏡套用到父元素時，有時會影響其子元素，如下所示出色地。為了防止這種不良效果，一個聰明的解決方案是在父元素中建立一個額外的 div。

解決方案：

1. 建立一個Overlay Div：

   建立一個Overlay Div：

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

在父元素中嵌套一個div，並使用與模糊效果相符的背景圖像。為其指定比父 div 更低的 z-index。

2. 將模糊效果應用到Overlay 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>

應用模糊效果使用CSS 覆蓋到覆蓋div 而不是父div：

3. 將不透明度Div 置於前面：

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

不透明度div 應該是位於z-index 較高的覆蓋div 前面。

此方法的優點：
• 模糊效果包含在覆蓋 div 中，防止其影響子元素。

opacity div 可用於控制內容的不透明度和其他屬性，而不干擾模糊效果。

以上是如何防止模糊濾鏡影響子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！