Как установить для свойства background-image линейный градиент, используя метод jQuery css?

Question

Когда я использую это на своей странице, градиент фона не появляется (сейчас я беспокоюсь только о Safari и Firefox):

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

Я пытался использовать только один или другой в соответствующих браузерах, но безуспешно.

Я могу просто использовать атрибут встроенного стиля для элемента в моем коде, но я бы предпочел не делать этого таким образом, если есть способ сделать это с помощью API jQuery.

Answer 1

У меня работает следующее.

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

jsFiddle Demo

Изменения:

• фон вместо backgroundImage
• вверху, внизу до: слева вверху, слева внизу
• отсутствует закрывающие скобки из градиента веб-набора
• изменено черно-белое на # 000000 и # FFFFFF
• добавлен второй .css

Проверено на Chrome и FF 6

Answer 2

Может быть некоторая разница между более новыми и старыми версиями WebKit:

Как объединить фоновое изображение и CSS3-градиент на одном элементе?

У меня есть небольшой пример работы со следующим:

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

вот скрипка:

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

Edit:

Странно, использование CSS-версии "map" css работает в Firefox, но не моей версии Chrome. То есть В Firefox у меня работает следующее, но не в Chrome:

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

Answer 3

Я попробовал это на Firefox 6.0.1, и он работает для меня

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