1

ボタンに css3 グラデーションを追加しています。jQuery は、クロスブラウザーの「background-image」宣言をすべて 1 つの宣言 (最後に見つかった「background-image」) として結合していると思います。jQuery を記述して、通常どおりすべてのクロスブラウザー css をブラウザーに提示するより良い方法はありますか?

これが私のjQueryです：

        $('.button').css({
        'background-color' : FromGradientColor ,
        'background-image' : '-webkit-gradient(linear, 0% 0%, 0% 100%, from('+ FromGradientColor +'), to('+ ToGradientColor +'))' ,
        'background-image' : '-webkit-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-moz-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-ms-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' ,
        'background-image' : '-o-linear-gradient(top,' + FromGradientColor +', ' + ToGradientColor +')' 
    });

これは、jQuery にブラウザーに提示してもらいたいものです (jQuery の変数によって決定される色を除く)。

background-color: #ddd;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
text-shadow: 0 1px 0 rgba(255,255,255,.8);
4

1 に答える 1

1

次のような例のように、スタイルをクラスに入れます。

@bgcolor: #ddd;

.gradient(@from: #eee, @to: #ccc) 
  {
  background-color: @bgcolor; 
  background-image: -webkit-linear-gradient(top, @from, @to); 
  background-image: -moz-linear-gradient(top, @from, @to); 
  background-image: -ms-linear-gradient(top, @from, @to); 
  background-image: -o-linear-gradient(top, @from, @to); 
  filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=@{from}, endColorstr=@{to})"; 
  -ms-filter: "'progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=@{from}, endColorstr=@{to})'"; 
  }

次に、それをそのように参照します。

$('.button').addClass("gradient")
于 2013-02-27T22:11:36.837 に答える