Question

这是我的问题。我想使用JQuery实时更新我的网站的背景图像渐变，但我找不到更新同一属性的多个回退的方法。我当然需要多个回退来支持跨浏览器。这是我班级的样子：

#bg_gradient
{
   background-color: #dcbebe; 

   background-image: url(images/fallback-gradient.png); 

   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779eb0), to(#dcbebe));

   background-image: -webkit-linear-gradient(top, #779eb0, #dcbebe);

   background-image: -moz-linear-gradient(top, #779eb0, #dcbebe);

   background-image: -ms-linear-gradient(top, #779eb0, #dcbebe);

   background-image: -o-linear-gradient(top, #779eb0, #dcbebe);
}

然后是我的JQuery：

$('#bg_gradient').css('background-image','url(../gradient.png)');
$('#bg_gradient').css('background-image','-webkit-linear-gradient(top, #fff, #000)');
$('#bg_gradient').css('background-image','-moz-linear-gradient(top, #fff, #000)');
...

当然，正如使用此方法所预期的那样，只会覆盖相同的background-image属性。

如何动态更新多个回退属性？有可能吗？

更新：我忘了提到我正在使用算法生成渐变过渡，并且有数百个值可以动态更新。

Answer 1

通过调用attr（），我可以直接更新style属性，并传入我想要的任何内容，例如，这就是我正在做的事情：

var wk = '-webkit-linear-gradient(top, ' + color_one + ',' + color_two + ')'
$('#bg_gradient').attr('style', 'background-image:url(../image.png);background-image:' + wk);

Answer 2

正如您所指出的那样设置相同的.css只会覆盖它。解决方法（痛苦）是使用jQuery.browser flags和jQuery.browser.version编写一些条件逻辑。

Answer 3

如果您发现了解决方案，请更新;但是现在，你是否反对使用两个不同的类，只是在它们之间切换？

是否可以使用JQuery更新多个回退CSS属性？

3 个答案: