CSS Transparent Background

By wendy, April 25, 2014

When you set a background opacity to transparent, how to avoid having the all of the children become transparent too?

One solution in the older days was to use a png background image.
We can now implement a pure CSS solution thanks to RBGa colors.

Here is the beatuiful code:
/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.8);
/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";

This should work in all browsers from IE6+, Chrome, FF 3+ etc.

1