JS/CSS添加多個背景

Question

我已經看到的.css（）函數的用法幾個或JS

簡單的設置element.style.background我想要的是堆疊多個背景，即增加一個背景在第一個。

我試圖

input.style.background.add("white url('http://cssdeck.com/uploads/media/items/5/5JuDgOa.png') no-repeat 30px 6px;"); 

但附加功能無法識別：

TypeError: input.style.background.add is not a function

我想我可以onload事件與 「background1」 後成立的CSS，然後將其重置爲「background1，background2 「並回到」background1「當我需要但我更喜歡add（）/ remove（）方法

Answer 1

爲什麼不創建幾個c lasses：

.bg-1{bg-img ...1} 
.bg-2{bg-img ...2} 

，並使用

.addClass('bg-1'); 

和

.removeClass('bg-x'); 

等等與通緝延遲一個js函數

警告：

jQuery函數適用於jque RY對象，爲您提供：

$(input).addClass('some-class'); 

Answer 2

CSS3讓網頁設計師可以指定框元素多背景圖片，僅僅使用一個簡單的逗號分隔的列表等等。

它是如何工作
多背景圖片就可以利用個人背景屬性或背景速記屬性來指定。

的sintax

background-image: <bg-image> [ , <bg-image> ]* 

<bg-image> = <image> | none 

例如：background-image: url(sheep.png), url(betweengrassandsky.png);

見這2個例子：

#exampleA { 
width: 500px; 
height: 250px; 
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); 
background-repeat: no-repeat; 
background-position: left top, right bottom, left top; 
} 


#exampleB { 
width: 500px; 
height: 250px; 
background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x; 
} 

所以，如果你想使用jQuery功能CSS添加多個背景（） ，只需按照上面的語法使用css（）中的對象即可。

.css({ 
    'background-image' : 'url(decoration.png), url(ribbon.png), url(old_paper.jpg)', 
    'width' : '400px' 
}); 

Answer 3

編輯：解決發現：

function SetSearchEngineLoadingStyle() 
{ 
    var input = document.getElementById('input'); 
    $("#input").removeClass("customSearchInputLoaded"); 
    $("#input").addClass("customSearchInputLoading"); 
} 

function SetSearchEngineLoadedStyle() 
{ 
    var input = document.getElementById('input'); 
    $("#input").removeClass("customSearchInputLoading"); 
    $("#input").addClass("customSearchInputLoaded"); 
} 

.customSearchInputLoading { 
    background: red url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") no-repeat 8px 6px; 
} 
.customSearchInputLoaded { 
    background: white url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") no-repeat 8px 6px; 
} 

確定現在它變得棘手，我想在添加一個簡單的CSS動畫裝載機作爲背景圖片（而非URL（「http://cssdeck.com/uploads/media/items/5/5JuDgOa.png」））裝載類;-)

我會做一些研究，但

感謝您的幫助有任何意見是值得讚賞

以及這部分答案我想;-)

率先從燒毛batteur使用addClass jQuery對象上

的CSS

.customSearchInputLoading { 
background: red url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") no-repeat 8px 6px; 
} 
.search input { 
background: white url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png") no-repeat 8px 6px; 
} 

js的工作：

$("#input").addClass("customSearchInputLoading"); 
(basically during the ajax call) 
    $("#input").removeClass("customSearchInputLoading"); 
(on ajax success) 

所以你看我想在ajax調用期間簡單地將輸入背景顏色切換爲紅色然後返回

這個工作，因爲我在Firebug這個類添加和刪除，但在視覺上它不會變成紅色看到...

FYI從尤里·拉莫斯領導與工作：

SetSearchEngineLoadedStyle(); 
SetSearchEngineLoadingStyle(); 

function SetSearchEngineLoadingStyle() 
{ 
    var input = document.getElementById('input'); 
    input.style.backgroundColor = 'red'; 
    input.style.backgroundImage = 'url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png")'; 
    input.style.backgroundPosition = '8px 6px'; 
    input.style.backgroundRepeat = 'no-repeat'; 
} 

function SetSearchEngineLoadedStyle() 
{ 
    var input = document.getElementById('input'); 
    input.style.backgroundColor = 'white'; 
    input.style.backgroundImage = 'url("http://cssdeck.com/uploads/media/items/5/5JuDgOa.png")'; 
    input.style.backgroundPosition = '8px 6px'; 
    input.style.backgroundRepeat = 'no-repeat'; 
}