Gradiente lineal en los navegadores Chrome y Safari

Tengo problemas para mostrar un degradado lineal en Safari y Chrome. En Firefox se muestra bien.Gradiente lineal en los navegadores Chrome y Safari

Estoy tratando:

background: -webkit-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; 
background: -moz-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; 
background:  -ms-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent; 
background:  -o-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;

Gracias por su ayuda.

Fuente

2012-07-27 codelove

Prueba esto - http://jsfiddle.net/fwkgM/1/

background-color: #9e9e9e; 
    background-image: linear-gradient(to bottom, #9e9e9e, #454545);

CSS3 Please

Fuente

2012-07-27 18:30:23

verificado que esto funciona en Chrome. :) –

Eliminé '-image' y todavía funciona, ¿por qué lo agregaste? –

Creo que lo hizo porque está separando la imagen de fondo del color de fondo. Si la 'background-image' se refiere a una url que no es accesible, el fondo volverá al' background-color' como valor predeterminado. En este caso, descubrió que el cambio de 'background-image' a' 'background' 'todavía funciona, lo que es solo evidencia de que hay más de una manera de despellejar a un gato. – JMD

También puede probar esto:

http://www.colorzilla.com/gradient-editor/

es un muy buen generador de gradiente de CSS3. Me ha funcionado bien. Espero que te ayude también! : D

Fuente

2012-07-28 06:20:58 Rega

Ese editor de degradado es genial. ¿Estoy pasando por alto una forma de especificar los colores con los nombres de colores estándar de CSS? P.ej. lightslategray, et al. Puedo buscar y reemplazar fácilmente en el CSS de gradiente resultante para cambiar rgba (xyza) con los nombres que quiero, pero los datos SVG IE9 generados son pregenerados. – JMD

background: -webkit-linear-gradient(left,transparent,black 50%,transparent); /* worked for me*/

Fuente

2014-07-12 18:30:27

Para la compatibilidad entre navegadores pruebe lo siguiente

background-color: #9e9e9e; /* fallback color if gradients are not supported */ 
background-image: -webkit-linear-gradient(bottom, rgb(213,12,18), #9e9e9e 40%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */ 
background-image: -moz-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For Firefox (3.6 to 15) */ 
background-image:  -o-linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* For old Opera (11.1 to 12.0) */ 
background-image:   linear-gradient(to bottom, #9e9e9e 60%, #454545 100%); /* Standard syntax; must be last */

Fuente

2016-01-13 06:46:51 kay

Gradiente lineal en los navegadores Chrome y Safari

Respuesta

Cuestiones relacionadas