Search code examples
cssopacityalphargbacontrast

Accounting for lower contrast when decreasing the opacity of dark background container

I am currently trying to fix some CSS. The specification I've got is that the background should be transparent, like this:

Transparent

But as you can see, when I set the background to transparent the white texts looks very washed out, as compared with:

Opaque

At the moment the text is set to fully white, fully opaque in the CSS:

.banner-content p {
    color: rgba(255,255,255,1) !important;
}

Can anyone suggest any CSS tricks to increase the apparent contrast, given that the text is already as white and as opaque as possible...

Solution

  • When you set the opacity of a container like this:

    #container {opacity:0.5;}

    it affects the opacity of the container AND all of its children. So the font becomes 50% opaque too.

    It seems like you really just want to give the container a translucent background, which you would do like this instead:

    #container {background-color:rgba(0, 0, 0, 0.5);}

    and that won't affect the text within that container.