如何禁用 CSS 背景过滤器？

Question

我正在尝试使我的背景成为一张带有过滤器的图片，前面有一个 div。问题是第二个 div 也有过滤器，我不能禁用它。

<section class="section-1">
<div class="content-section-1">
<p>Lorem ipsum dolor...</p>
</div>
</section>

.section-1 {
box-sizing: border-box;
height: 100vh;
padding: 110px 10% 50px 10%;
min-height: 500px;
background-color: aqua;
background-image: url(http://s.hswstatic.com/gif/climbing-mount-everest-5.jpg);
background-size: cover;
background-position: center;
-webkit-filter: blur(4px) opacity(0.6);
filter: blur(4px) opacity(0.6);
}
.content-section-1 {
padding: 15px;
background-color: rgba(0, 0, 0, 0.6);
-webkit-filter: none;
filter: none;
width: 100%;
height: 100%;
}

https://jsfiddle.net/63914142/

Answer 1

filter 与opacity 一样，会影响所有后代元素，因此您无法将其从该子元素中移除。

使用伪元素并对其应用过滤器。

.section-1 {
  box-sizing: border-box;
  height: 100vh;
  padding: 110px 10% 50px 10%;
  min-height: 500px;
  position: relative;
}
.section-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: aqua;
  background-image: url(http://s.hswstatic.com/gif/climbing-mount-everest-5.jpg);
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(4px) opacity(0.6);
  filter: blur(4px) opacity(0.6);
}
.content-section-1 {
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  color: white;
}

<section class="section-1">
  <div class="content-section-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis accusantium, eum soluta tempore repellendus, debitis quia, magni eligendi ipsa minima eveniet at, temporibus dolorem ab modi voluptatibus vero quaerat excepturi.</p>
  </div>
</section>