0

背景画像と背景グラデーションを組み合わせることができますか？これをjQuery経由で別のdivに追加するにはどうすればよいですか？

私のコードは次のようになります...

$('#cboxTitle').css({
background-image: 'url(images/login.png)',
background-image: '-webkit-gradient(linear, 0 0, 0 bottom, from(#1f344b), to(#132533))',
background-image: '-webkit-linear-gradient(#1f344b, #132533)',
background-image: '-moz-linear-gradient(#1f344b, #132533)',
background-image: '-ms-linear-gradient(#1f344b, #132533)',
background-image: '-o-linear-gradient(#1f344b, #132533)',
background-image: 'linear-gradient(#1f344b, #132533)'
});

...しかし、それは機能しません。:(

さらに、jQueryを介して別のdiv（id = "cboxTitle"）にスタイルを追加したいと思います。これはどうやるんですか？このクロスブラウザは互換性がありますか（古いInternet Explorerバージョンを含む）？

4

3 に答える 3

2

どうぞ！

http://jsfiddle.net/Dku2D/

ボタンの高さと幅にCSSを追加しました。

#mybutton {
background: url(https://ssl.gstatic.com/gb/images/k1_a31af7ac.png);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1f344b), to(rgba(19, 37, 51, 0.53))), url(https://ssl.gstatic.com/gb/images/k1_a31af7ac.png);
background: -webkit-linear-gradient(#1f344b, rgba(19, 37, 51, 0.53)), url(https://ssl.gstatic.com/gb/images/k1_a31af7ac.png);
background: -moz-linear-gradient(#1f344b, rgba(19, 37, 51, 0.53)), url(https://ssl.gstatic.com/gb/images/k1_a31af7ac.png);
background: -ms-linear-gradient(#1f344b, rgba(19, 37, 51, 0.53)), url(https://ssl.gstatic.com/gb/images/k1_a31af7ac.png);
background: -o-linear-gradient(#1f344b, rgba(19, 37, 51, 0.53)), url(https://ssl.gstatic.com/gb/images/k1_a31af7ac.png);
background: linear-gradient(#1f344b, rgba(19, 37, 51, 0.53)), url(https://ssl.gstatic.com/gb/images/k1_a31af7ac.png);
}
于 2013-03-15T22:28:42.383 に答える
1

Yuはのdiv内部で使用できますdiv。1つ目はグラデーションの背景になり、2つ目はbg画像になります。

また、jQueryの.css() http://api.jquery.com/css/でCSSプロパティを追加できます（次のようになります）$('#cboxTitle').css('color', 'red');

于 2013-03-15T22:10:42.823 に答える
1

すでに述べたように、CSS3の複数の背景機能を使用する必要があります。

background-image: url(…), -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000));
background-image: url(…), -moz-linear-gradient(#FFF, #000);

古いブラウザでこれをサポートするには、http：//modernizr.com/を使用してください。

于 2013-03-16T01:27:30.823 に答える