CSS3 gradient de problèmes avec le rendu de la transparence à blanc

Je suis d'avoir des problèmes avec la croix-navigateur rendu des dégradés CSS3. Ce qui se passe quand je suis en train de créer un dégradé de couleurs transparent blanc.

Le fichier que je suis à l'aide de test est la suivante:
http://f.cl.ly/items/0E2C062x3O161b09261i/test.html

CSS est utilisé:

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%);

Déchirante ressemble à ce que je veux dans Safari 6 (mac):
CSS3 gradient de problèmes avec le rendu de la transparence à blanc

Chrome rendu des fondus de couleur gris avant de fondus au blanc (Firefox rend cette façon aussi sur mac os):
CSS3 gradient de problèmes avec le rendu de la transparence à blanc

Des idées ou des suggestions sur les raisons de cette étrange rendu peut-être?

OriginalL'auteur phawk | 2012-08-06

  1. 44

    J'ai rencontré cette. Je ne suis pas sûr de savoir pourquoi cela arrive, mais voici ce que j'ai utilisé dans mes propres projets en tant que solution de contournement:

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

    Au lieu de donner de Chrome un "transparent" de la valeur, lui donner quelque chose de très, très près de la transparence. Espérons que cette aide!

    Edit: j'ai oublié de mettre un lien vers mon propre version, ce qui le rend comme prévu dans Chrome 21 (Windows 7).

    J'ai eu ce problème dans lequel Safari a été rendu transparent différemment de tous les autres navigateur, j'ai vérifié. Merci pour l'astuce!
    Je crois que vous pouvez réellement utiliser rgba(255, 255, 255, 0) pour obtenir la plus grande transparence, ce qui fonctionne pour moi en tout cas 🙂
    C'est un vieux post. Les navigateurs ont, depuis, fixe leur transparence des bogues, et maintenant cela fonctionne: codepen.io/peiche/stylo/mMKaLP
    Malheureusement, "transparent" ne fonctionne toujours pas dans Safari, pas même dans Safari TP. C'est parce que "transparent" est considérée comme "transparent noir"; la spécification d'une couleur réelle avec l'alpha de 0 fonctionne.
    J'ai réussi à résoudre Safari problème à l'aide de led avec 0 alpha pour la même couleur, il transite. E. g. dans le cas où vous voulez gradient de la transparence à la chaux (rgb(0, 255, 0)), utilisez ceci: background: linear-gradient(top, rgba(0, 255, 0, 0), lime) j'Espère que cela peut aider. Edit: viens de remarquer que vous parlez, même corrigé, désolé 🙂

    OriginalL'auteur wavetree

  2. 15

    Le CSS, j'ai collé ici a été mauvais, j'ai été l'édition du fichier erroné DOH!

    Original CSS 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%);

    Problème étant transparent n'est pas une couleur, c'est noir avec 0 alpha, définissant précisément blanc avec 0 alpha résout le problème. (merci @carisenda)

    Encore les points sur les incohérences avec la façon dont les fournisseurs de navigateur sont à traiter avec transparence alpha dans les dégradés CSS3.

    OriginalL'auteur phawk