Explication détaillée de la façon de rendre le dégradé de couleur d'arrière-plan compatible avec CSS

Dans des projets récents, des dégradés linéaires ont été utilisés à de nombreux endroits, comme l'arrière-plan du bouton de soumission du formulaire, l'arrière-plan du titre de l'affichage des données, etc. La pratique précédente consistait à couper l'image 1px puis à répéter-x . Ci-dessous, je vais vous présenter comment utiliser CSS pour obtenir cet effet.

css3 : gradient-linéaire

Par exemple : dégradé noir vers blanc, le code est le suivant :

.gradient{
    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%);
}

Instructions : L'utilisation spécifique du dégradé linéaireCliquez ici pour entrer .

filtre ie : filtre

le dégradé linéaire n'est pas pris en charge sous ie9, donc pour ie6 - ie8, nous pouvons utiliser filtre pour résoudre le problème , le code est le suivant :

.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

Puisque le filtre est une propriété privée de ie, nous devons gérer l'effet de filtre séparément pour ie9. Le code est le suivant. :

:root {filter:none;}

Résumé :

Pour résumer, la méthode d'écriture compatible du dégradé linéaire est la suivante :

.gradient{
    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='#000000', endColorstr='#ffffff',GradientType=0 );
}:root .gradient{filter:none;}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!