Change opacity of background colour, but not text

Question

I am trying to make the background less opaque but have the colour of the text remain the same.

.overview {
  background: gray;
  width: 45%;
  opacity: 0.3;
  margin-left: auto;
  margin-right: auto;
  font-size: large;
  border-radius: 8px;
}

.overview p {
  text-align: center;
  color: white;
}

<div id="overview" class="overview">
  <p>
    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

  </p>
</div>

However both the text and background colour become dimmer

score 4 · Answer 1 · edited Nov 15 '18 at 21:42

4

Your background should be an RGBA color, applying opacity is for the div

background-color:rgba(128,128,128,0.3);

edited Nov 15 '18 at 21:42

Zechariah Raman

17
1
7

answered Nov 15 '18 at 18:27

Nickfmc

369
1
8

score 0 · Answer 2 · answered Nov 15 '18 at 18:28

@wtreston The following code should be:

.overview {
    background: gray;
    width: 45%;
    opacity: 0.3%;
    margin-left: auto;
    margin-right: auto;
    font-size: large;
    border-radius: 8px;

}

.overview p {
    text-align: center;
    color: white;
}

<div id="overview" class="overview">
        <p>
                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah
                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

        </p>
    </div>

I may have misunderstood your question.

Hope This helps!

Change opacity of background colour, but not text

2 Answers2