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

Yu可能会在div内使用div。第一个是渐变背景，第二个是bg图像。

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

Answer 3

如前所述，你应该使用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/

即可

结合背景图像与背景渐变

3 个答案: