¿Cómo configuro la propiedad de la imagen de fondo en un degradado lineal usando el método css de jQuery?

Question

Cuando utilizo esto en mi página no aparece el gradiente de fondo (sólo estoy preocupado por Safari y Firefox en el momento):

$("#myElement").css({ 
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)", 
    backgroundImage: "-moz-linear-gradient(top, black, white)" 
}); 

He intentado utilizar sólo uno o el otro, así como en el navegadores apropiados, pero no hubo suerte allí.

Puedo simplemente usar un atributo de estilo en línea para el elemento en mi código, pero prefiero no hacerlo de esa manera si hay una manera de hacerlo usando la API de jQuery.

Answer 1

las siguientes obras para mí.

$("#myElement").css({ 
    background: "-webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF))"}).css({ 
    background: "-moz-linear-gradient(top, black, white)" 
}); 

jsFiddle Demo

Cambios:

• fondo en lugar de BackgroundImage
• superior, inferior a: superior izquierda, izquierda abajo
• falta de cerrar paréntesis, a partir del gradiente webkit
• modificaciones blanco y negro a # 000000 y # FFFFFF
• añadió una segunda Css

Probado en Chrome y FF 6

Answer 2

He intentado esto en Firefox 6.0.1 y funciona para mí

$(function() { 

$("#myElement").css({ 
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)", 
    backgroundImage: "-moz-linear-gradient(top, black, white)" 
}); 

}); 

HTML

<div id="myElement">testing</div> 

Answer 3

Puede haber alguna diferencia entre las versiones más recientes y de mayor edad webkit:

How do I combine a background-image and CSS3 gradient on the same element?

me dieron una pequeña muestra de trabajo con lo siguiente:

$(function(){ 
    $("#myElement").css("background-image", "-webkit-linear-gradient(top, #000000, #ffffff)"); 
    $("#myElement").css("background-image", "-moz-linear-gradient(top, black, white)"); 
}); 

aquí es un violín:

http://jsfiddle.net/Hmmpd/1/

Editar:

impar, utilizando el css "mapa" versión de la obra CSS en Firefox pero no es mi versión de Chrome. Es decir. las siguientes obras para mí en Firefox, pero no cromo:

$(function(){ 
    $("#myElement").css({backgroundImage: "-webkit-linear-gradient(top, #000000,#ffffff)",backgroundImage: "-moz-linear-gradient(top, black, white)"}); 
});