Estoy teniendo problemas para mostrar un gradiente lineal en Safari y Chrome. En Firefox se muestra bien.

Estoy tratando de:

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.

OriginalEl autor codelove | 2012-07-27

4 Comentarios

  1. 31

    Intente esto: http://jsfiddle.net/fwkgM/1/

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

    CSS3 por Favor

    Comprobado que esto funciona en Chrome. 🙂
    He quitado -image y todavía funciona, así que ¿por qué agregar ?
    Creo que él lo hizo porque él es la separación de la imagen de fondo desde el color de fondo. Si el background-image se refiere a una url que no es accesible el fondo todavía caen de nuevo a la background-color como un defecto. En este caso, se encontró que el cambio de background-image a sólo background todavía funciona, que es sólo la evidencia de que hay más de una manera para la piel de un gato.
    Yo sólo tenía que añadir imagen para un ángulo/sesgada gradiente para trabajar en safari: background-image: linear-gradient(135deg,#F9C665, #ef3429,...etc)

    OriginalEl autor Zoltan Toth

  2. 6

    También puede probar este:

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

    Es un buen generador de gradientes CSS3. Ha funcionado bien para mí. Espero que sea de ayuda para usted también! 😀

    Que editor de degradado es grande. Estoy con vistas a una forma de especificar los colores utilizando el estándar CSS color nombres? E. g. lightslategray, et al. Me puede fácilmente buscar y reemplazar en el gradiente resultante de CSS para cambiar rgba(xyza) con los nombres que yo quiero, pero el generado IE9 datos SVG es pre-generados.

    OriginalEl autor Rega

  3. 3

    Para la compatibilidad con todos los navegadores tratar el 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 */

    OriginalEl autor kay

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

    OriginalEl autor Brian Sanchez

Dejar respuesta

Please enter your comment!
Please enter your name here