Z-index filter affects content with a higher z-index

Question

I want to make a piece of content in HTMLCSS with the background-image having a grey background(filter) over it this is fairly simple but the content does also get the grey filter , i gave everything a position relative and did the following:

background: lowest z-index filter: middle z-index content: highest z-index (shouldnt be affected by the middle z-index in my opinion) but the thing is: it does, the middle z-index affects my highest z-index and i do not understand why this is the code i wrote ( sample code because the other code was too big)

html:

<body>
<div class="filter">

    <div class="content">
        <h1>Hello Stackoverflow</h1>
        <p>Please help me view this without the filter effect affecting the content ( this part)</p>
    </div>
 </div>
 </body>

css:

body{
    background-image: url('the-doors.jfif');
    position: relative;
    z-index: 1;
}
.filter{
    background-color: grey;
    opacity: 40%;
    position: relative;
    z-index: 2;
}
.content{
    color: green;
    font-size: 3.0em;

    position: relative;
    z-index: 3;    
}

can somebody please help me explain why the content also gets the grey filter effect although it has a higher z-index

the opacity in parent is effecting the child elements. try changing background color to #80808028 and remove opacity — saqib kifayat, Apr 16 '20 at 20:34
it should have the same background, basically i want my content to be fully over the background img and the filter, so that the text itself doesnt become grey-ish — Morris420, Apr 16 '20 at 20:39

score 1 · Accepted Answer · answered Apr 16 '20 at 20:42

1

You should remove your opacity and use rgba color to have opacity within your color.

body{
    background-image: url('the-doors.jfif');
    position: relative;
}
.filter{
    position: relative;
    background-color:rgba(100,255,255,.5) /* <==  Here you should change it */
}
.content{
    color: green;
    font-size: 3.0em;
    position: relative;
}

<div class="filter">

    <div class="content">
        <h1>Hello Stackoverflow</h1>
        <p>Please help me view this without the filter effect affecting the content ( this part)</p>
    </div>
 </div>

answered Apr 16 '20 at 20:42

HamiD

1,075
1
6
22

Thank you for your answer i'm gonne implement your method – Morris420 Apr 16 '20 at 20:44
welcome, feel free to ask if you needed :) you can change your color to rgba using this website: https://bl.ocks.org/njvack/02ad8efcb0d552b0230d; – HamiD Apr 16 '20 at 20:46

Z-index filter affects content with a higher z-index

1 Answers1