jquery - 将背景图像与背景渐变相结合

Question

是否可以将背景图像与背景渐变相结合？如何通过 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 版本）？

Answer 1

干得好！

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);
}

Answer 2

as already said, you should use CSS3's multiple backgrounds feature:

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

to support this in older browsers just use http://modernizr.com/

Answer 3

喻可以用div里面的一个div。第一个将具有渐变背景，第二个将具有背景图像。

.css() 您可以通过 jQuery 的http://api.jquery.com/css/添加 CSS 属性（类似于$('#cboxTitle').css('color', 'red');