This example explores issues with opacity/transparency and backgrounds.

These examples show many uses for transparency effects in Web Design. Before doing design work with transparency, it certainly helps to understand the basics.

When a background-color is set using a #hex color value, a CSS opacity setting is inherited by text and even child blocks.
If this (see source code) doesn't over-ride the parent's opacity, nothing is going to.
Making the text bold does make it somewhat more readable.
When a background-color is set using the rgba() color notation, the "alpha chanel" can be used to set opacity (instead of the CSS opacity property). Then text and child blocks DO NOT inherit the alpha chanel opacity.
I am a child block that's the exact color as the one above, but this one is not inheriting the opacity.
You can create some "soft" or "easy on the eye" effects with opaque background colors when the children inherit the opacity like in the first example above.
But either way (opacity or rgba()), it's basically just "lightening" the background-color. In both examples above, it's actually this shade of blue before the 0.4 opacity lightens it.
The block below is actually fully 1.0 opaque, but uses a shade of blue that exactly matches the "lightened blues" above.
This block is #CDCAE7 with 1.0 opacity. In most cases, its easier to simply choose an appropriate light color than a darker one that you artificially lighten using opacity settings.


But when it comes to background images and opacity, it's a bit more complicated. You can't use the rgba() trick because a background-image takes precedence over a background-color. If you specify both, the background-color is simply ignored. If you want a very subtle image background, it's usually best just to Photoshop it into something very subtle rather than trying to use CSS opacity.

When you use opacity to "tone down" a background-image, the block's contents will also get the opacity since rgba() is no help.


The W3Schools Image Transparency Page has interesting examples of what you can do with image transparency. The "Text in Transparent Box" example toward the bottom is interesting. The example below explains that concept a bit further.

This is a child block with a white background-color with opacity set to 0.75 using rgba(). The parent block has the background-image. The white child block basically serves as a transparent overlay. The parent block has some padding so that you can see the background-image on the outside of the transparent overlay.

If you remove that padding, then the child overlay block will fill up the parent, effectively creating a transparency effect on the background-image. It's also interesting to adjust the opacity of the child overlay block and see how the overlay effect changes.