web-dev-qa-db-fra.com

Problèmes de rendu de dégradé CSS3 du transparent au blanc

J'ai des problèmes avec le rendu multi-navigateur des dégradés CSS3. Cela se produit lorsque j'essaie de créer un dégradé de couleur transparente au blanc.

Le fichier que j'utilise pour tester est: http://f.cl.ly/items/0E2C062x3O161b09261i/test.html

Le CSS utilisé est:

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);

Le rendu ressemble à ce que je veux dans Safari 6 (mac): Safari 6 Mac OS 10.8

Le rendu de Chrome passe à la couleur grise avant de se fondre au blanc (Firefox rend également de cette façon sur Mac OS): Chrome 21 Mac OS 10.8

Des idées ou des suggestions sur la raison de ce rendu étrange?

cssgradient
36
phawk

Je l'ai également rencontré. Je ne sais pas pourquoi cela se produit, mais voici ce que j'ai utilisé dans mes propres projets comme solution:

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

Au lieu de donner à Chrome une valeur "transparente", donnez-lui quelque chose de très, très proche de transparent. J'espère que cela vous aidera!

Modifier: j'ai oublié de publier un lien vers le mien version , qui s'affiche comme prévu dans Chrome 21 (Windows 7).

65
wavetree

Le CSS que j'ai collé ici était faux, je modifiais le mauvais fichier DOH!

CSS d'origine ne fonctionne pas

background-image: linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, transparent 0%, #fff 5%, #fff 100%);

CSS qui a résolu le problème

background-image: linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);
background-image: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 5%, #fff 100%);

Le problème d'être transparent n'est pas une couleur, il est noir avec 0 alpha, le réglage sur spécifiquement blanc avec 0 alpha résout le problème. (merci @carisenda)

Cela souligne toujours des incohérences avec la façon dont les fournisseurs de navigateurs traitent la transparence alpha dans les dégradés CSS3.

26
phawk

L'astuce avec une couleur en plus du blanc (et avec du blanc en fait) est de rgba la couleur réelle qui s'estompe .

background-image: linear-gradient(to right, 
  rgba(111,174,249, 0) 0%,
  rgba(111,174,249, 0) 80%,
  rgb (111,174,249)    100%);

Dans le cas où la couleur utilisée est hexadécimale (comme #6faef9) utilisez n convertisseur hexadécimal en rgba pour convertir la couleur.

0
WEBjuju