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

【问题标题】：How do I set the background-image property to a linear gradient using jQuery's css method?如何使用 jQuery 的 css 方法将 background-image 属性设置为线性渐变？
【发布时间】：2011-09-08 21:34:35
【问题描述】：

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

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

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

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

【问题讨论】：

我在 Firefox 6.0.1 版本中测试过，它对我有用

标签： jquery css linear-gradients

【解决方案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
上、下到：左上、左下
webkit 渐变中缺少右括号
将黑白更改为#000000 和#FFFFFF
添加了第二个 .css

在 Chrome 和 FF 6 上测试

【讨论】：

昨晚我在发布我的问题后发现了“top”->“left top”解决方案。我从来没有真正想过对我有用的双 css 方法调用，所以非常感谢！我实际上可以使用 backgroundImage 属性，我有点惊讶背景会为你工作，因为我在某处读到 jQuery 不接受其 css 方法中的“组合”样式（可能在最新版本的图书馆）。我还可以使用黑白代替#000000 和#ffffff。哦，缺少的括号只是这个例子的一个错字。 :-) 再次感谢！！

【解决方案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>

【讨论】：

【解决方案3】：

新旧 webkit 版本之间可能存在一些差异：

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

我得到了一个使用以下内容的小样本：

$(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 版本。 IE。以下在 Firefox 中适用于我，但不适用于 chrome：

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

【讨论】：

我遇到了同样的问题。在我按照您和 Toukakoukan 的建议尝试了双 css 方法调用之后，一切似乎都运行良好。似乎css方法调用的“map”/“object”版本只是按顺序替换了每个包含的样式，因为对象中的最后一个总是被使用的那个。