Last Updated: February 25, 2016
·
2.192K
· mephysto

Transparent background colour, with a fallback to IE8-

Using RGBA instead of HEX, you can set a transparent background colour. But IE8 and lower doesn't support this, so you should declare a fallback for that browser like so:

div {
    background-color: #7fc7ff; // a lightblue colour. non-transparent. Only shows up if following line fails:
    background-color: rgba(0,144,255,0.5); // a transparent blue colour.
}

If you want to go a bit more fancy. A more elaborate fallback would be to use gradient filters.

div {
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7f7fc7ff', endColorstr='#7f7fc7ff'); // hex value of AARRGGBB is used.
    background-color: rgba(0,144,255,0.5);
}

Take note that when you're using filters in IE you're basically using a plugin. It eats up more processing power. So if you're building something fancy you'll want to consider that during your optimization rounds.