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