Background with Blur and div of the middle without

Question

I have a section, occupies the entire area of the browser window, and with a background image filling its entire area. Within this section have a div centered and with another background image.

I’d like to apply an effect blur in section in order to blur the background image, however, I would like the div within the section not affected by the effect. The problem is that when applying the blur in section, to div within it is also affected. How could apply the blur in Ction without affecting the div?

Code:

body{
   margin: 0;
   padding: 0;
}

section{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url(https://images2.alphacoders.com/728/728536.jpg);
   background-attachment: fixed;
   height: 100vh;
   filter: blur(5px);
}

#meio{
   filter: blur(0);
   background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
   background-size: cover;
   width: 600px;
   height: 600px;
   border-style: solid;
   border-color: blue;
   border-width: 20px;
   box-shadow: 10px 5px 5px red;
}

<section>
   <div id="meio"></div>
</section>

Answer 1

When you put some effect on the "father" you cannot remove it from the son. So if the father has blur, or opacity, or some other effect of that kind you can not remove it from the child, the effect will affect both!

Option 1

To avoid the problem you can create an element ::after in sa Ction, and in it you put the background with the Blur, so you avoid putting the Blur directly in the father, and yes in a pseudo-element his.

See how it looks:

body {
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://images2.alphacoders.com/728/728536.jpg);
  background-attachment: fixed;
  height: 100vh;
  overflow: hidden;
}

section::after {
  content: "";
  background: url(https://images2.alphacoders.com/728/728536.jpg);
  background-attachment: fixed;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  filter: blur(5px);
}

#meio {
  /* filter: blur(0); */
  background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
  background-size: cover;
  width: 600px;
  height: 600px;
  border-style: solid;
  border-color: blue;
  border-width: 20px;
  box-shadow: 10px 5px 5px red;
  z-index: 1;
}

<section>
  <div id="meio"></div>
</section>

---

Option 2

This model I made was taking the child element out of the father, then using position:absolut and transform:translate I did the alignment. See how the result was.

body {
  margin: 0;
  padding: 0;
}

section {
  /* position: relative; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://images2.alphacoders.com/728/728536.jpg);
  background-attachment: fixed;
  height: 100vh;
  filter: blur(5px);
  position: absolute;
  width: 100%;
}

#meio {
  filter: blur(0);
  background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
  background-size: cover;
  width: 600px;
  height: 600px;
  border-style: solid;
  border-color: blue;
  border-width: 20px;
  box-shadow: 10px 5px 5px red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<section></section>
<div id="meio"></div>

Answer 2

Another option would be to place another div-child with absolute position and apply the background and the Blur in that div. That div would have the background function of the Section.

Create a pseudo ::after as proposed by @Hugocsl reply seems to me to be the best alternative, however, if you want to at some point manipulate this element with Javascript, you will not be able because pseudo-elements are not manipulable via JS, already a common div yes.

Then it would be:

body{
   margin: 0;
   padding: 0;
}

section{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

#meio{
   background-image: url(https://wallpaperstudio10.com/static/wpdb/wallpapers/1920x1080/195173.jpg);
   background-size: cover;
   width: 600px;
   height: 600px;
   border-style: solid;
   border-color: blue;
   border-width: 20px;
   box-shadow: 10px 5px 5px red;
}

#fundo{
   filter: blur(5px);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(https://images2.alphacoders.com/728/728536.jpg);
   background-attachment: fixed;
   z-index: -1;
}

<section>
   <div id="fundo"></div>
   <div id="meio"></div>
</section>