web-dev-qa-db-fra.com

Comment puis-je empêcher les bandes de dégradé CSS?

J'ai commencé à utiliser des dégradés CSS, plutôt que des images réelles, pour deux raisons: premièrement, le dégradé CSS se charge nettement plus vite qu'une image, et deuxièmement, ils ne sont pas censés afficher de bandes, comme c'est le cas de nombreux graphiques raster. J'ai récemment commencé à tester mon site sur divers écrans et sur des écrans plus grands (plus de 24 pouces), le dégradé linéaire CSS qui constitue l'arrière-plan de mon site affiche des bandes très visibles. En guise de solution provisoire, j'ai recouvert le dégradé avec une petite image de bruit PNG transparente, répétitive, qui aide un peu. Existe-t-il un autre moyen de résoudre ce problème de baguage?

css3gradientlinear-gradientscss
34
John Doe

Je sais que vous n'aimerez pas le son de ce son, mais le seul moyen real d'obtenir une esthétique cohérente entre navigateurs dans ce cas-ci consiste à utiliser une image répétée.

S'il s'agit d'un simple dégradé linéaire, il vous suffit de définir une largeur égale à 1 pixel et une largeur égale à celle du dégradé, puis définissez la couleur d'arrière-plan de la page comme couleur finale du dégradé pour que le dégradé soit fluide. Cela gardera la taille du fichier minuscule.

Si vous souhaitez réduire les bandes de dégradé dans votre image, utilisez un fichier PNG (pas de transparence), car j'estime que celles-ci sont mieux adaptées que JPG à cette fin.

Dans Adobe Fireworks, je l’exporterais au format PNG-24.

Bonne chance.

http://codepen.io/anon/pen/JdEjWm

#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);
}
18
Michael Giovanni Pumo

Vous pouvez obtenir des résultats légèrement supérieurs en faisant passer votre dégradé de la première couleur à la transparence, avec un background-color en dessous pour votre deuxième couleur. Je vous recommande également de jouer avec background-size pour les grands dégradés qui s'étendent sur l'écran, afin que le dégradé ne remplisse pas tout l'écran.

16
AlexKempton

J'ai fait un "scatter.png" à mettre avec mon dégradé. Comme ça:

  1. Guimpe ouverte
  2. Image 100x100
  3. Ajouter un canal alpha
  4. Filtres -> Bruit -> Hurl ... Accepter les paramètres par défaut
  5. Définir l'opacité à 5%

  6. Enregistrez puis ajoutez au dégradé.

    background: url('/img/scatter.png'), linear-gradient(50deg,#d00 0,#300 100%);

C'est un effet subtil sur un effet subtil.

4
Michael Cole

Je sais que ce problème est résolu depuis longtemps, mais pour les autres utilisateurs de bandes et cherchant une solution, une solution très simple pour moi consistait simplement à simplifier les couleurs que j'avais incluses dans mon dégradé. Par exemple:

Ce gradient produit des bandes: 

background-image: linear-gradient(-155deg, #202020 0%, #1D1D1D 20%,
#1A1A1A 40%, #171717 60%, #141414 80%, #101010 100%);

Ce gradient n'a pas, et ressemble beaucoup à la même chose: 

background-image: linear-gradient(-155deg, #202020 0%, #101010 100%);
2
Allan of Sydney

Il n'y a pas vraiment de méthode pour supprimer le baguage. Les dégradés CSS sont à la merci des différents moteurs de rendu des navigateurs. Certains navigateurs rendent simplement mieux que d'autres. Le mieux que vous puissiez faire est de raccourcir les zones à couvrir et d’étendre les gammes de couleurs pour augmenter les incréments de dégradés .... Attendez ensuite que le rendu du navigateur s’améliore.

1
Scott

Pour une réponse CSS pure, vous pouvez utiliser un filtre de flou pour ajouter du flou au dégradé CSS et atténuer la formation de bandes. Cela peut signifier une reconstruction de la hiérarchie pour ne pas brouiller le contenu et vous devez masquer le débordement pour obtenir des contours nets. Fonctionne vraiment bien sur un fond d’animation où la question des bandes peut être particulièrement grave.

.blur{
  overflow:hidden;
  filter: blur(8px);
}
0
Sven