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/

Answer 1

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>