結合背景圖像和背景漸變

是否有可能將背景圖像和背景漸變結合起來？你怎麼能通過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

結合背景圖像和背景漸變

回答

相關問題