结合背景图像和背景渐变

是否有可能将背景图像和背景渐变结合起来？你怎么能通过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版本）吗？

来源

2013-03-15 drpelz

有可能与多背景'背景图像：网址（ ..），线性渐变（顶部，#fff，＃000）'。为什么选择jQuery？使用一个类切换它会更容易。 – elclanrs 2013-03-15 22:10:35

对我而言，jQuery解决方案会更好，因为我的网站大量使用它。我必须通过jQuery来更改它，因为div通过插件（colorbox）加载。 – drpelz 2013-03-15 22:16:53

这是一个jQuery解决方案，您可以使用CSS对元素进行样式设置，然后使用jQuery来打开和关闭该类。 – elclanrs 2013-03-15 22:28:02

在这里你去！

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-15 22:28:42

哇！:)非常感谢你！你救了我的一天！：D – drpelz 2013-03-16 01:24:44

余可以使用div内div。第一个将具有渐变背景，第二个你的BG图像。

，您可以通过添加CSS属性jQuery的.css()http://api.jquery.com/css/（它会是像$('#cboxTitle').css('color', 'red');

来源

2013-03-15 22:10:42 Lemurr

啊！非常感谢！:) – drpelz 2013-03-15 22:15:20

前面已经说了，你应该使用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-16 01:27:30

不错的提示！:)到目前为止还不知道modernzr.com。非常感谢你！：） – drpelz 2013-03-16 01:35:28

结合背景图像和背景渐变

回答

相关问题