jquery - 如何使用 jQuery 的 css 方法将 background-image 属性设置为线性渐变？

Question

当我在我的页面上使用它时，背景渐变不会出现（我现在只担心 Safari 和 Firefox）：

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

我尝试在适当的浏览器中只使用一种或另一种，但没有运气。

我可以在我的代码中为元素使用内联样式属性，但如果有办法使用 jQuery 的 API 来做，我宁愿不这样做。

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 演示

变化：

• 背景而不是背景图像
• top, bottom to：左上，左下
• webkit 渐变中缺少右括号
• 将黑白更改为 #000000 和 #FFFFFF
• 添加了第二个 .css

在 Chrome 和 FF 6 上测试

Answer 2

我在 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>

Answer 3

较新和较旧的 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/

编辑：

奇怪的是，使用 css “map” 版本的 css 在 Firefox 中工作，但不是我的 Chrome 版本。即以下在 Firefox 中适用于我，但不适用于 chrome：

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