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中文网其他相关文章！