Come si imposta la proprietà background-image su un gradiente lineare usando il metodo css di jQuery?

Question

Quando uso questo sulla mia pagina lo sfondo sfumato non appare (io sono preoccupato solo di Safari e Firefox al momento):

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

Ho provato ad utilizzare solo uno o l'altro pure nella browser appropriati, ma senza fortuna lì.

Posso semplicemente usare un attributo di stile inline per l'elemento nel mio codice, ma preferirei non farlo in questo modo se c'è un modo per farlo usando l'API di jQuery.

Answer 1

i seguenti lavori per me.

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

jsFiddle Demo

Modifiche:

• sfondo anziché backgroundimage
• superiore, inferiore a: alto a sinistra, a sinistra sotto
• mancanti chiusura parentesi dal gradiente webkit
• ha cambiato in bianco e nero di # 000000 e #FFFFFF
• aggiunto un secondo css

Testato su Chrome e 6 FF

Answer 2

Ho provato questo su Firefox 6.0.1 e funziona per me

$(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

Ci può essere qualche differenza tra le versioni più recenti e meno recenti WebKit:

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

ho avuto un po campione di lavoro con il seguente:

0.123.

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

ecco un violino:

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

Edit:

Dispari, utilizzando il css "mappa" versione di lavoro css in Firefox, ma non la mia versione di Chrome. Cioè le seguenti opere per me in Firefox, ma non al cromo:

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