Méthode de traitement compatible avec gradient gradient IE expliquée-tutoriel CSS-php.cn

Méthode de traitement compatible avec gradient gradient IE expliquée

高洛峰

Libérer： 2017-03-21 14:32:17

original

2172 Les gens l'ont consulté

Selon caniuse (http://caniuse.com/#search=gradient), la compatibilité rgba est pour les navigateurs IE10 et supérieurs.

Méthode de traitement compatible avec gradient gradient IE expliquée

Exemple de code :

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>gradient 兼容性处理</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: #000000;
                background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
                background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
            }
        </style>
    </head>

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

</html>

Copier après la connexion

Effet du navigateur Chrome :

Méthode de traitement compatible avec gradient gradient IE expliquée

Effet navigateur IE8 (pas de dégradé) :

Méthode de traitement compatible avec gradient gradient IE expliquée

Traitement de compatibilité rgba :

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background: #000000;
                background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff));
                background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -o-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%);
                background: linear-gradient(to bottom, #000000 0%, #ffffff 100%);
                /*关键属性设置*/
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;, GradientType=0);
            }

Copier après la connexion

Définir l'attribut de filtre Le but est à exécuter lorsque la transparence de la ligne précédente ne fonctionne pas. filter : progid:DXImageTransform.Microsoft.gradient est utilisé pour créer des dégradés : lisible et inscriptible Définir ou récupérer la direction du dégradé de couleur :
1 : Par défaut. valeur . Dégradé horizontal.
0 : Dégradé vertical.