0

这就是我所拥有的：

$("#list .active").closest('.header').css({
'background-color' : '#1a2e51',
'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#2c3c6f), to(#071f31))',
'background-image' : '-webkit-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : '-moz-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : '-o-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : 'linear-gradient(to bottom, #2c3c6f, #071f31)'
});

在线示例：http: //jsfiddle.net/qSfvK/

但是，它不会向我显示渐变，因为我在 jQuery 中没有很好地编写它，那么该怎么做呢？

编辑

我可以使它在 CSS 中工作，但不能在 jquery 中工作，通过查看此链接了解我的意思：http:
//jsfiddle.net/qSfvK/10/

4

1 回答 1

1

这不是 html 或您的选择器的问题，而是 css 映射函数的工作方式。在这种情况下，您不会向浏览器发送一个样式表，它可以解析并决定使用哪个背景语句。相反，jQuery 每次都会覆盖 background-image 属性，因此任何浏览器的最终 background-image 属性都是最后一个'linear-gradient(to bottom, #2c3c6f, #071f31)'. 您可以像我一样通过删除与浏览器不兼容的渐变线并重新运行小提琴来测试这一点。

解决这个问题的方法是添加 JavaScript 的条件行，根据正在使用的浏览器分配适当的 background-image 属性。

所以...

如果 Safari 4+，Chrome 1-9 ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#2c3c6f), to(#071f31))'
});​

ELSE IF Safari 5.1+、移动版 Safari、Chrome 10+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-webkit-linear-gradient(top, #2c3c6f, #071f31)'
});​

否则，如果 Firefox 3.6+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-moz-linear-gradient(top, #2c3c6f, #071f31)'
});​

否则，如果 Opera 11.10+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-o-linear-gradient(top, #2c3c6f, #071f31)'
});​

等等。

于 2012-09-16T11:25:04.563 回答