如何使用 jQuery 的 css 方法将背景图像属性设置为线性渐变？

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

更改：

• 背景代替背景图片
• 顶部、底部改为：左上、左下
• 缺少 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“地图”版本的 css 在 Firefox 中工作，但在我的 Chrome 版本中不行。即以下内容适用于 Firefox 但不适用于 chrome：

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