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 Demo

变更：

background而不是backgroundImage
顶部，底部至：左上角，左下角
缺少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版本之间可能存在一些差异：

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/

编辑：

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

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

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

3 个答案: