css3 - horizontal - gradient generator css online

Cuestiones de degradado CSS3 de transparente a blanco

Question

Estoy teniendo problemas con la representación en varios navegadores de gradientes CSS3. Esto ocurre cuando intento crear un degradado de color transparente a blanco.

El archivo que estoy usando para probar es: http://f.cl.ly/items/0E2C062x3O161b09261i/test.html

CSS utilizado es:

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

Rending se parece a lo que quiero en Safari 6 (mac):

La representación de Chrome se desvanece a color gris antes de que se convierta en blanco (Firefox se reproduce de esta manera también en Mac OS):

¿Alguna idea o sugerencia sobre por qué podría ser esta representación extraña?

Answer 1

El CSS que pegué aquí estaba mal, estaba editando el archivo incorrecto DOH!

CSS original no funciona

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 que solucionó el problema

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

El problema de ser transparente no es un color, es negro con 0 alfa, configurándose específicamente blanco con 0 alfa soluciona el problema. (gracias @carisenda)

Esto todavía apunta a inconsistencias con la forma en que los proveedores de navegadores tratan con la transparencia alfa en los gradientes de CSS3.

Answer 2

También me he encontrado con esto. No estoy seguro de por qué sucede, pero esto es lo que he usado en mis propios proyectos como solución alternativa:

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

En lugar de darle a Chrome un valor "transparente", dale algo muy, muy cercano a la transparencia. ¡Espero que esto ayude!

Edición: olvidé publicar un enlace a mi propia version , que se reproduce como se esperaba en Chrome 21 (Windows 7).