Using RGBa in CSS allows you to easily set opacity and is a great way to add a little depth and nuance to the design of your website, but like much in the ever-changing world of CSS, RGBa is not supported by all browsers (i.e. Internet Explorer). Here’s a great list detailing RGBa support.
The syntax is simple enough:
background-color: rgba(255, 255, 255, 0.8);
But there’s a catch. If you want to provide a fallback background color declaration for a browser that does not support RGBa – which you should want to do – you cannot use the CSS short-hand: background-color. You must use: background.
background: rgb(255, 255, 255); /* Fallback */
background: rgba(255, 255, 255, 0.8);
Which will give you this:
