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