Filter with opacity, above a background

I’m not ashamed to tell that I spend so many times to find a solution with this filter, because when I gave an opacity to it, every child elements had the same opacity, so that’s why I would like to right this, even if it is simple for lot of people:

In my html

In my CSS

I add css to the .banner class

=> If I don’t give a position like absolute, relative or fixed, to the element, the z-index property will not work.

=> All elements have the z-index value of 0 by default.

=> The element that has the largest value of z-index, will be positioned above the others.

I add css in the .filter class

=> I apply the same size of the .banner element.

=> Then, I add the value of 0,5 inside curly braces of rgba value, because I don’t want to apply the opacity to the child elements, like the title for example.

I hope it will help you.