Поместите текст HTML перед слоем CSS rgba

Question

Вот скриншот моей работы:

So I have 3 layer at that pic :

1. Image layer
2. RGBA dark grey (low opacity) layer
3. Text layer

I want the HTML text is not covered by rgba grey layer. I've trying it like this :

    // bg image  // greyLayer // Текст    

Но вместо этого серый слой становится невидимым.

Вот полный код, который реализует как в pi c

Заголовок. js

<div className="card card-image" style={{backgroundImage: `url(${jumbotronImg})`, backgroundSize: "cover", backgroundBlendMode: ""}}>
                <div className="greyLayer"></div>
                    <div className="text-white text-center rgba-stylish-strong">
                        <div className="py-3">
                            <h5 className="h5 orange-text"><i className="fas fa-camera-retro"></i> Photography</h5>
                            <h2 className="card-title h2 my-4 py-2">ToDo List App</h2>
                            <p className="mb-4 pb-2 px-md-5 mx-md-5"></p>
                            <a className="btn peach-gradient"><i className="fas fa-clone left"></i> View project</a>
                        </div>
                    </div>
            </div>

Заголовок. css

.greyLayer {
    background-color: rgba(46, 49, 49, 1);
    opacity: 50%;
}

Кстати, я работаю над проектом React. Не знаю, что с этим делать

Answer 1

Вы можете изменить разметку так, чтобы текст был одним из элементов слоя с низкой непрозрачностью:

<div style="some background image"> <!-- bg image -->
    <div className="greyLayer"></div> <!-- greyLayer -->
    <div className="textDiv">
        Text
    </div>
</div> 

После этого вы можете иметь текст с более высоким z-индексом, чтобы он оставался включенным верх слоя с низкой непрозрачностью.

.textDiv {
    position: relative; /* give any other position value other than static for z-index to take effect */
    z-index: 20;
}