See-through CSS: opacity vs. RGBA

Setting different transparencies on elements of your web page is a quick and easy way to add visual interest and a bit of flare. For a long time I was getting tripped up on when to use the opacity property and when to use RGBA. I finally got to the bottom of things in this codepen.

Opacity
The opacity property sets how see-through your element is. In my codepen, I have a page of text with a see-through sticky footer. When the opacity is set in this way, all of the div‘s children inherit this opacity.

div.opacity{
  opacity: 0.9;
  background-color: #333;
}

opacity

This might be the effect you’re going for in some instances, but in this case I wanted my text and images to remain filled-in.

RGBA

This is where RGBA comes in. Rather than setting the whole parents opacity, RGBA target’s only the parents background colour. Children do not inherit this from their parents so they are free to be filled in.

div.opacity{
  background: rgba(51,51,51,0.90);

rgba

VoilĂ , all of our images and text remain filled-in for maximum style!

How do you use transparencies in your design?

Tags: , , , , , ,

Categorised in:

This post was written by Vanessa Merritt

Leave a Reply

Your email address will not be published. Required fields are marked *