Play with CSS3 colors

Traditionally, the colors used in CSS are either in hexadecimal format or rgb format, like rgb(171,205,239).

CSS3 brings some new ways to deal with color, such as using HSL (Hue, Saturation, Light) and opacity/alpha channels. Unfortunately, currently only Firefox 3+, Chrome 1.0+ and Safari 3+ and a few derivative browsers fully support them. But we can do our best, and IE won't start supporting some CSS3 properties until Internet Explorer 9.

Opacity

This is actually an old property, and surprisingly, it is supported by current versions of IE - albeit in a more complicated way.

Opacity makes the entire CSS object transparent, and the transparency of all child elements will be inherited appropriately. The official syntax is as follows:

opacity: [0-1 decimal];

So an opacity: 0.5; setting would make the object 50% transparent. Although newer browsers actively support it, older browsers still require some custom code, just like Internet Explorer.

Currently, for older Firefox versions, we need to use the -moz- prefix, and for older Safari/Chrome versions, we need to use the -webkit- prefix. For older versions of Safari that still use the KHTML kernel instead of the webkit kernel, we need to use -khtml-. So if we want to support every browser, our code should look like this:

opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;

Ah, wait a minute! What to do with IE? Well, IE does not support this at all, but it uses a proprietary filter. The traditional method is short and concise:

filter:alpha(opacity=50);

Please note that for IE we need to use integers from 0 to 100, not decimals like the opacity attribute. Sadly, Internet Explorer 8 provides a new way to handle this. Don't try to remember this one like the other one, it's a long one:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Of course, if you want to support older IE browsers, you will have to use the shorter one above, which means that if you want to be compatible with most browsers, you will need a total of six CSS statements.

PS: In fact, Safari has supported the opacity attribute since version 1.2 (2004). Safari with KHTML core is basically hard to find anymore. In fact, Konqueror has never supported the -khtml-opacity attribute, so please don’t Use it (I considered the integrity of the original text when translating, so I did not make corrections to the above code). Opera has supported CSS3 opacity since 9.0, while Firefox did not natively support opacity until 3.5. IE8's -ms- plus filter is really a genius work of Microsoft! However, please note that if you want to use filter and -ms-filter at the same time, please note that -ms-filter is written in front of filter. ——Shenfei