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:
=> 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 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.