Detailed explanation of rgba compatibility processing method-CSS Tutorial-php.cn

Detailed explanation of rgba compatibility processing method

高洛峰

Release： 2017-03-21 14:36:32

Original

1939 people have browsed it

According to caniuse (http://caniuse.com/#search=rgba), rgba compatibility is IE9 and above browsers.

Detailed explanation of rgba compatibility processing method

Instance code:

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>rgba 兼容性处理</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background-color: rgba(0, 0, 0, 0.5);
            }
        </style>
    </head>

    <body>
        <div>
            rgba
        </div>
    </body>

</html>

Copy after login

Chrome browser effect:

Detailed explanation of rgba compatibility processing method

IE8 browser effect (no background):

Detailed explanation of rgba compatibility processing method

rgba compatibility processing:

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background: rgba(0, 0, 0, 0.5);
                /*下一句关键设置*/
                filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);
            }

Copy after login

The purpose of setting the filter attribute is the previous line Executed when the transparency does not work, filter: progid:DXImageTransform.Microsoft.gradient is used to make gradients, but no gradient is needed here, so both colors are set to the same color.

This color "#7f000000" is composed of two parts.

The first part is 7f after #. Is the IEfilter value of rgba transparency 0.5. Each number from 0.1 to 0.9 corresponds to an IEfilter value. The corresponding relationship is as follows:

Detailed explanation of rgba compatibility processing method

#That is: the value obtained by alpha*255 can be converted into hexadecimal.

The second part is the six digits after 7f is a hexadecimal color value, which is the same as the value in the rgb function , such as rgb(255,255,255) #ffffff.

Summary: This has completed the RGBA compatibility processing for IE8 and the following IE browsers.

The above is the detailed content of Detailed explanation of rgba compatibility processing method. For more information, please follow other related articles on the PHP Chinese website!