How do I apply a CSS filter to ONLY the background image

Question

I have a div tag with a background image that has some text text inside, I want to apply a filter to the background image without disrupting the texton the inside of the div layer. Is this possible? (This is my first post I hope I didn't layout anything incorrectly!)

.img_container{
    box-sizing: border-box;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a1/Mallard2.jpg");
    background-size: contain;
    width: 500px; 
    height: 380px; 
    filter: blur(2px);
    color: #333;
    text-align: center;
    padding-top: 20%;
    font-size: 20px;
}

    <div class="img_container">
        <div class="img_text"> I want to be clear! </div>
    </div>

Answer 1

You can make use of the css pseudo element ::before

.img_container {
 position: relative;
 width: 500px;
 height: 380px;
 color: #333;
 text-align: center;
 padding-top: 20%;
 font-size: 20px;
}

.img_container::before {
 content: " ";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a1/Mallard2.jpg");
 background-size: contain;
 background-repeat: no-repeat;
 filter: blur(2px);
 z-index: 0;
}

.img_text {
 position: relative;
}

<div class="img_container">
  <div class="img_text"> I want to be clear! </div>
</div>

::before with the content: " " creates a pseudo element before the div with class .img_text (use your browser inspect tool to see the element). This is the element we style and add a background to.

Note that you also have ::after pseudo element to add at the end.

Answer 2

Make them 2 seperate objects....

<div class="img_container">
</div>
<div class="img_text"> I want to be clear! </div>

.img_container{
    box-sizing: border-box;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a1/Mallard2.jpg");
    background-size: contain;
    width: 500px; 
    height: 380px; 
    filter: blur(2px);
    color: #333;
    text-align: center;
    font-size: 20px;
    position:relative;
    z-index: 5;
}

.img_test {
  position:absolute;
  text-align:center;
  width: 500px;
  height: 380px;
  z-index: 10;
  top: 20%;
}