CSS中如何防止子元素繼承模糊效果？

使用 CSS 去除子元素的模糊效果

在父元素上使用 CSS 模糊效果時，常常會遇到子元素也繼承模糊的問題。為了解決這個問題，我們可以在父級中建立一個單獨的 div 並對其套用模糊效果。

實作

1. 在內容div 中加入一個額外的div 並為其分配一個

<code class="html"><div class="content">
  <div class="overlay"></div>
  <div class="opacity">
    <!-- Child elements... -->
  </div>
</div></code>

2. 在CSS中，將模糊效果和背景圖像分配給overlay 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中文網其他相關文章！