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（）を呼び出すことで、スタイル属性を直接更新し、必要なものを渡すことができます。たとえば、次のようにします。

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

ご指摘のとおり、タグに同じ.cssを設定すると、タグが上書きされます。回避策（苦痛）は、jQuery.browserフラグとjQuery.browser.versionを使用して条件付きロジックを作成することです。

于 2011-08-07T15:02:58.950 に答える
0

解決策を見つけたら更新してください。しかし今のところ、2つの異なるクラスを使用して、それらを切り替えることに反対していますか？

于 2011-08-07T18:54:18.630 に答える