Solution for IE8-incompatible RGBA ()

Introduced

The Squid project requires a translucent overlay, and a div similar to the alert box on the hood layer. Because if you use opacity, the parent has transparency that affects the child, so using RGBA () can solve the problem of transparency inheritance. But again, Rgba () is a new property of CSS3, so IE8 and the following browsers are not compatible, what can I do? Finally, I found a solution.

Problems occurred

If you use Rgba (), this is the effect on non-IE8 and the following browsers:

If this is the case in IE8 and the following browsers:

The transparency disappears!!!!!!

Solutions

Let's start by explaining the following RGBA

Rgba

The meaning of Rgba, R represents Red,g on behalf of GREEN,B representative blue,a for transparency.

RGBA (0,0,0,.5) This represents black, with a transparency of 0.5

To solve the problem of transparency under IE8, you can add this sentence:

     Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #7f000000, endcolorstr= #7f000000);    /* IE8 Support */

This phrase was originally used for gradients, but there is no gradient effect so startcolorstr and EndColorStr are set to the same color.

The #7f000000,#7f Here represents the transparency,000000 represents the color, and the following is the table of transparency:

This will be a perfect solution to the issue of transparency! ~

Solution for IE8-incompatible RGBA ()