• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Enthusiast ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

To resolve this issue I read about using pseudo-element with ::before applied.

However, my use case is different from a simple hero banner...

 

<div class="col-lg-6 order-lg-1 my-auto showcase-text">

Within there is some <h2> txt, <p> 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-top7rem;
    padding-bottom7rem;
   }
.order-lg-1::before {
    content"";
    position: absolute;
    background: url("../img/photograph.jpg") no-repeat center center;
    background-size: cover;
    opacity0.15;
    }
 
Then added 'position: relative' to the individual text styles <h2>, <p>...
I could use some tutelage how to get this right, considering there are multiple
classes involved.

Thank you.
TOPICS
Bootstrap , Code

Views

153

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Oct 20, 2021 Oct 20, 2021

I'd go with "the easy way" on this one and just turn the jpg into a partially transparent .PNG file, then use it as a standard css background-image.

No need to fuss with opacity in the code then.

Votes

Translate

Translate
Community Expert , Oct 20, 2021 Oct 20, 2021

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**/;

}

 

Votes

Translate

Translate
LEGEND , Oct 20, 2021 Oct 20, 2021

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;

}

 

 

 

Votes

Translate

Translate
Community Expert ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

I'd go with "the easy way" on this one and just turn the jpg into a partially transparent .PNG file, then use it as a standard css background-image.

No need to fuss with opacity in the code then.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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**/;

}

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 20, 2021 Oct 20, 2021

Copy link to clipboard

Copied

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;

}

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Oct 29, 2021 Oct 29, 2021

Copy link to clipboard

Copied

LATEST

I think all of these responses are valid and each presents a unique solution to the issue.

Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines