How can I disable a CSS background filter?

Question

I am trying to make my background a picture with a filter with a div in front of it. The problem is that the second div has the filter too and I can't disable it.

<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/

you need to rearrange the HTML. here is the same problem + the solution http://stackoverflow.com/questions/22406478/remove-blur-effect-on-child-element — Heidar, Aug 12 '15 at 13:34

score 0 · Accepted Answer · answered Aug 12 '15 at 13:36

filter, like opacity, affects all descendant elements so you can't remove it from that child.

Use a pseudo-element and apply the filter to that instead.

.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>

How can I disable a CSS background filter?

1 Answers1