The modern browsers all have rgba(), giving you a semi-transparent background colour while keeping the foreground elements (text, images) fully opaque. But if you want to use that …
CSS hexadecimal colors with transparency, a conversion tool
In both Chrome and Firefox, you can now use hexadecimal notation to describe semitransparent colors, by adding an extra pair of digits to the end of a hexadecimal notation.
This hexadecimal #rrggbbaa notation is pretty useful and saves you from looking up the conversion from hexadecimal to the 0-255 range that rgba() needs. However, doing math in hexadecimal notation (counting from 0 to F) isn’t something I, and I imagine many others, are quite adapt at. Say you want something at 50% transparent, how much is that in Hex? It’s 80! That’s not very intuitive.
It’s pretty similar to how IE’s in the past allowed you to do transparency, except they used ARGB, with the Alpha part at the beginning. Back in 2010 I wrote an article that included a conversion tool from rgba() to ARGB notation, useful for ancient versions of IE. You probably shouldn’t use that anymore. I figure, why not do a remix and update it for some rgba() to #rgba conversion!
Convert to and from rgba() and #rgba
This notation works with both 8 digits and 4 digits (shorthand notation) so #ffffff88 and #fff8 both correspond to rgba(255,255,255,0.53); Quite a neat trick that works in Chrome from version 52 onwards (and Opera version 39, as they are both based on Chromium), Firefox 49 onwards and Safari 9.1 onwards. I could not find anything about Edge supporting it, or having support planned.
So, a useful extra way of defining semitransparent colors. I imagine, when browser support lets me, I’ll use this mostly in places where I already have #rgb notation and want to add opacity. For new colors, rgba() is much easier to reason in.
CSS 2 and 3 offer a number of different ways to pick colours. While everyone knows the hexadecimal notation, fewer people know the RGB notation and colour keywords, and the new col…
Background-repeat is an often used method of making smaller images possible while creating a filling background. But in my eyes it is far too limited. You could do much more with i…