Opacity applied to container is fading the text on top 'layer'...

Question

To resolve this issue I read about using pseudo-element with ::before applied.However, my use case is different from a simple hero banner...

Within there is some

txt,
text and a button.However, I'd like the background image in this overall container to have a light opacity.As mentioned, it took back the opacity of all elements within this same block. I tried pulling 'order-lg-1' as the key class to work with in order to define:.order-lg-1 { position: relative; padding-top: 7rem; padding-bottom: 7rem; }.order-lg-1::before { content: ""; position: absolute; background: url("../img/photograph.jpg") no-repeat center center; background-size: cover; opacity: 0.15; } Then added 'position: relative' to the individual text styles

,
...I could use some tutelage how to get this right, considering there are multipleclasses involved.Thank you.

osgood_ · Accepted Answer

If you have a requirement to insert an opacity layer over your background image and NOT affect the h2 and paragraph text content inside the parent container:

.order-lg-1 {

position: relative;

}

.order-lg-1::before {

content = "";

position: absolute;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5); /* Black opacity */

background-color: rgba(255, 255, 255, 0.5); /*White opacity */

}

.order-lg-1 h2, .order-lg-1 p {

color: #fff;

position: relative;

z-index: 10;

}

Nancy OShea · Answer

Opacity effects everything.

Use a background-color of rgba (A = alpha-transparency) which does not effect the container text.

Use case:

.col-lg-6 {

background-color: rgba(0,0,0,0.50) /**this is 50% black**/;

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded