7

これを自分のページで使用すると、背景のグラデーションが表示されません (現時点では Safari と Firefox だけが心配です)。

$("#myElement").css({
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
    backgroundImage: "-moz-linear-gradient(top, black, white)"
});

適切なブラウザでどちらか一方だけを使用してみましたが、うまくいきませんでした。

コード内の要素にインライン スタイル属性を使用することもできますが、jQuery の API を使用してそれを行う方法がある場合は、そのようにしたくありません。

4

3 に答える 3

5

以下は私にとってはうまくいきます。

$("#myElement").css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF))"}).css({
    background: "-moz-linear-gradient(top, black, white)"
});

jsFiddle デモ

変更点:

  • backgroundImage の代わりに background
  • 上、下から:左上、左下
  • Webkit グラデーションに閉じ括弧がありません
  • 白黒を #000000 と #FFFFFF に変更
  • 2 番目の .css を追加しました

Chrome と FF 6 でテスト済み

于 2011-09-08T21:50:28.643 に答える
0

Firefox 6.0.1でこれを試してみましたが、うまくいきます

$(function() {

$("#myElement").css({
    backgroundImage: "-webkit-gradient(linear, top, bottom, from(black), to(white)",
    backgroundImage: "-moz-linear-gradient(top, black, white)"
});

});

HTML

<div id="myElement">testing</div>
于 2011-09-08T21:44:25.630 に答える
0

新しい Webkit バージョンと古い Webkit バージョンの間には、いくつかの違いがある場合があります。

同じ要素で background-image と CSS3 グラデーションを組み合わせるにはどうすればよいですか?

私は以下で動作する小さなサンプルを手に入れました：

$(function(){
    $("#myElement").css("background-image", "-webkit-linear-gradient(top, #000000, #ffffff)");
    $("#myElement").css("background-image", "-moz-linear-gradient(top, black, white)");
});

ここにフィドルがあります：

http://jsfiddle.net/Hmmpd/1/

編集：

奇妙なことに、css の「マップ」バージョンの css を使用すると、Firefox では機能しますが、私のバージョンの Chrome では機能しません。つまり、Firefoxでは次のように機能しますが、クロムでは機能しません。

$(function(){
    $("#myElement").css({backgroundImage: "-webkit-linear-gradient(top, #000000,#ffffff)",backgroundImage: "-moz-linear-gradient(top, black, white)"});
});
于 2011-09-08T21:50:53.100 に答える