2

这是我的问题。我想使用 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 属性只是被覆盖了。

如何动态更新多个后备属性？可能吗？

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

4

3 回答 3

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);
于 2011-08-07T15:40:20.457 回答
0

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

于 2011-08-07T18:54:18.630 回答
0

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

于 2011-08-07T15:02:58.950 回答