jQuery CSS 背景图像声明？

Question

这是我的:

$("#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/

Answer 1

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

解决此问题的方法是添加 JavaScript 的条件行，根据所使用的浏览器分配适当的背景图像属性。

所以...

如果 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))'
});​

否则如果 Safari 5.1+、Mobile 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)'
});​

等等。