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不是函数

我想我可以在使用＆＃34; background1＆＃34;进行onload后设置css，然后将其重置为＆＃34; background1，background2＆＃34;并回到＆＃34; background1＆＃34;当我需要但我更喜欢 add（）/ remove（）方法

Answer 1

CSS3允许网页设计师为框元素指定多个背景图像，只使用简单的逗号分隔列表。

如何运作
可以使用单个背景属性或背景速记属性指定多个背景图像。

sintax

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

<bg-image> = <image> | none

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

见这两个例子：

#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 2

为什么不创建几个类：

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

并使用

.addClass('bg-1');

和

.removeClass('bg-x');

等...使用带有所需延迟的js函数

警告：

Jquery函数适用于jquery对象，为您：

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

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（＆＃34; http://cssdeck.com/uploads/media/items/5/5JuDgOa.png＆＃34;））; - ）< / p>

我会做一些研究，但任何意见都表示赞赏

感谢您的帮助

这是我猜的部分答案; - ）

使用jquery对象

上使用addClass的单身人士的主角工作

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中看到该类被添加和删除，但在视觉上它并没有变成红色......

来自Yuri Ramos的领导与之合作：

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

js / css添加多个背景

3 个答案: