IE8 for compatible RGBA

Yesterday encountered a problem, to achieve a transparent background effect, with CSS3 with RGBA () can be achieved, that is

background: rgba(0,0,0,.5);

However, to be compatible with IE8, there is no transparency effect because IE8 does not support the RGBA () function. Let's summarize the meaning of the RGBA () function.

The meaning of Rgba, R represents Red,g on behalf of GREEN,B representative blue,a for transparency. Red, green and blue are three primary colors, all of which can be composed of these three colors. For example, Rgba (0,0,0,.5) is a 0.5 transparency black. Modern browsers support Rgba, but in IE8 and other antique-level browsers do not support RGBA, IE8 can only reluctantly support the RGB () function (that is, remove the transparency, can only represent color).

But there's this solution on the Internet.

background: rgb(0, 0, 0);    /*不支持rgba的浏览器*/background: rgba(0,0,0,.5); /*支持rgba的浏览器*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/

The second sentence means to execute when the transparency of the previous line does not work. The meaning of this sentence is used to make the gradient, but this place does not need a gradient. So two colors are set to the same color.

Explain the next #7f000000, the first part is the 7f behind the # number. is the Iefilter value of the RGBA transparency 0.5. From 0.1 to 0.9 each number corresponds to a iefilter value. The corresponding relationship is as follows:

The second part is six bits after 19. This is the color value of the six binary. Is the same as the value in the RGB function. For example, RGB (0,0,0) corresponds to #000;

Here, the use of RGBA can be compatible with IE8.

Recently, instead of adding a filter directly inside the style, you can use it to add filter compatibility to IE. later found that IE9 also support RGBA and filter, resulting in two overlapping, the transparency effect is worse, so need to change ,
The following are the specific practices:

<!--[if lt IE 9]>   <style type="text/css">   .color-block {       background:transparent;       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);       zoom: 1;    }    </style><![endif]-->

IE8 for compatible RGBA