HTML/CSS: use RGBA color values to set opacity on a background color; transparent for invisible

I was trying to set opacity on the background of an HTML container (DIV) element. But if I used opacity:.5 style, it also sets the opacity of children elements inside. And this cannot be overridden by setting opacity:1 on those children elements.

The workaround is to set the opacity as a part of the background color itself using RGBA values (red, green, blue, alpha). For example:

DIV.translucent {background-color:rgba(245,222,179,.75);}

 Yes, it's annoying you can’t apply an alpha channel to a hex color value. But you can use a color picker utility to convert hex to RGB, then add the alpha you want. (Note: the RGB values are in the range 0–255; the alpha value is in the range 0–1 where 0 is completely transparent and 1 is completely opaque.)

Finally, if you don’t want a background at all, you can set it to transparent:

DIV.see-thru {background-color:transparent;}

The special color value transparent works anywhere you might specify a color: borders, background, foreground/text…