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.
Written by Maurice Melchers
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css3
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#