CSS : Background opacity is showing on text

Question

Take this Code for example

#backgroundimage {
  background: url("https://www.solidbackgrounds.com/images/640x480/640x480-aero-solid-color-background.jpg");
  height: 50px
}

#container {
  background-color: #4C4C4C;
  opacity: 0.5;
}

#text {
  color: #ffffff;
  opacity: 1;
}

<div id="backgroundimage">
  <div id="container">
    <p id="text">
      Some text here
    </p>
  </div>
</div>

I want to make the text color white while keeping the background image and container opacity intact. Look at this image as Reference

SuperDJ · Accepted Answer · 2018-08-27T12:15:01.667

3

Have a look at the following example. Instead of opacity use rgba. According to docs:

opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.

#backgroundimage {
  background: url("https://www.solidbackgrounds.com/images/640x480/640x480-aero-solid-color-background.jpg");
  height: 500px
}

#container {
  background-color: rgba(76,76,76,.5);
}

#text {
  color: #ffffff;
}

<div id="backgroundimage">
  <div id="container">
    <p id="text">
      Some text here
    </p>
  </div>
</div>

edited Aug 27 '18 at 12:15

answered Aug 27 '18 at 12:08

SuperDJ

7,488
11
40
74

Thanks it help a Lot – Muhammad Usama Ashraf Aug 27 '18 at 12:10
Your code uses rgb instead of rgba. – connexo Aug 27 '18 at 12:11
this is the correct answer to your question, don't forget to close the question and pick this as the right answer – Torjescu Sergiu Aug 27 '18 at 12:11
why flagging as duplicate then answering? – Temani Afif Aug 27 '18 at 12:11
@TemaniAfif According to timestamp the answer came before the flag – SuperDJ Aug 27 '18 at 12:12
you should then remove it .. it doesn't make sense to flag after answering IMHO .. and the timestamp show my close vote not yours – Temani Afif Aug 27 '18 at 12:13
@connexo fixed it – SuperDJ Aug 27 '18 at 12:15

score 0 · Answer 2 · answered Aug 27 '18 at 12:10

When you set the opacity of an element, it affects its children (and if you set an opacity of a child, it can't override the opacity of the parent.

What you need to do is not to set the opacity of the element, but set opacity only to the background - using rgba.

#backgroundimage {
  background: url("https://www.solidbackgrounds.com/images/640x480/640x480-aero-solid-color-background.jpg");
  height: 500px
}

#container {
  background-color: rgba(76, 76, 76, 0.5); /* #4C4C4C;*/
  /*opacity: 0.5;*/
}

#text {
  color: #ffffff;
  opacity: 1;
}

<div id="backgroundimage">
  <div id="container">
    <p id="text">
      Some text here
    </p>
  </div>
</div>

score -2 · Answer 3 · answered Aug 27 '18 at 12:09

-2

Make the background image (640x480-aero-solid-color-background.jpg) transparent and save it as .png or .gif format.

remove "opacity: 0.5" from "#container" class and "opacity: 1" from "#text" class

answered Aug 27 '18 at 12:09

eMythMakers.com

19
1
6

CSS : Background opacity is showing on text

3 Answers3