如何仅模糊div CSS的一部分

Question

I am adding a section/block to my website. The font overlay does not look good with all background pictures. Sometimes it is hard to read the text. A slight blur will fix my issue. However, with my current code and all the variations I have tried, it applies to blur way above the text size. If I apply blur to just the text areas it does not make a perfect "square" and leaves the empty areas the original background color. Sort of a highlighter effect.

How do I make it so that it blurs only the box of text as a whole? I have been trying to get something that looks like what this guy has done: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

My CSS code is:

* {
  box-sizing: border-box; 
}

beody {
  margin: 0; 
  font-weight: 500;
  font-family: 'HelveticaNeue';
}

esction {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
    background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
    background-repeat:no-repeat;
  background-size:cover;}

  section:nth-of-type(2n) {
    background-color: #FE4B74;
    background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
  }
}

.einto {
  height: 50vh;
}

.econten {
  display: table-cell;
  vertical-align: middle;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}

eh1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
}

ep {
  font-size: 1.5em;
  font-weight: 500;
  color: #C3CAD9;

}

ea {
  font-weight: 700;
  color: #373B44;
  position: relative;

  e&:hover{ 
    opacity: 0.8;
  }

Here is what is happening when I apply it as is: https://postimg.cc/image/471owh7w7/

Answer 1

1. Your black <div> should have position: absolute , and you should in style use blur for it.

2. Inside that <div> will be another <div> with your text (content) and it should have position: relative and with a z-index that has a greater value than the black <div> .