Comment éliminer les bandes de dégradé CSS : obtenir une esthétique cohérente sur tous les appareils

Lutter contre les bandes de dégradé CSS : obtenir une esthétique cohérente

Bien que les dégradés CSS offrent des avantages en termes de performances par rapport aux images, ils peuvent parfois présenter des bandes visibles, en particulier sur les images. des écrans plus grands. Cet article explore le problème et présente des solutions pour atténuer ce problème.

Malgré les attentes initiales, les dégradés linéaires CSS peuvent présenter des bandes sur certains navigateurs et écrans. Bien qu'une solution de contournement temporaire implique la superposition d'une image de bruit transparente, cette approche ne constitue pas une solution complète.

Les étapes suivantes décrivent une solution plus robuste :

1. Utiliser une image répétitive :

   • Pour des dégradés linéaires simples, créez une image de 1 px de large avec le dégradé souhaité.
   • Faites de la couleur d'arrière-plan de la page la couleur du dégradé final pour assurer une transition transparente.
   • Cette méthode minimise la taille du fichier tout en éliminant efficacement les bandes.

2. Convertir au format PNG :

   • Au lieu des fichiers JPG, utilisez des fichiers PNG pour les images en dégradé.
   • L'exportation de l'image dans Adobe Fireworks au format PNG-24 donne généralement de meilleurs résultats.

Voici un exemple d'extrait de code montrant comment implémenter le dégradé avec une image répétitive :

<code class="css">#gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white));
  background: -webkit-linear-gradient(top, black, white);
  background: -moz-linear-gradient(top, black, white);
  background: -ms-linear-gradient(top, black, white);
  background: -o-linear-gradient(top, black, white);
  background: linear-gradient(top, black, white);
}</code>

En implémentant ces techniques, vous pouvez atténuer efficacement les bandes de dégradé CSS, garantissant ainsi une expérience cohérente et visuellement agréable dans l'ensemble. différents navigateurs et écrans.

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!