向元素添加第二个背景图像

我想知道是否可以通过CSS3或jQuery/js将第二个背景图像分配给元素。向元素添加第二个背景图像

为了明确这一点我是知道我能做到这样：

.someElement { background-image: url(sheep.png), url(betweengrassandsky.png); }

的事情是我需要做的是这样的：

.someElement    { background-image: url(sheep.png); } 
.someElement.secondClass { background-image: url(betweengrassandsky.png); }

的问题是，这将只是覆盖第一个背景图像而不是合并它们。有没有解决这个问题的方法？

感谢

来源

2012-07-12 Zhivko

什么是你的目标试图在这里实现？让他们并排？还有别的吗？ – smilebomb 2012-07-12 18:07:27

你必须为你在CSS的第一行显示重复第一背景图像。

如果你愿意，你可以检查.someElement，看它是否具有第二类，并使用应用它的jQuery：

$('.someElement').each(function() { 
    if ($(this).hasClass('secondClass')) { 
     var background = $(this).css('background-image'); 
     $(this).css('background-image', background + ', url(betweengrassandsky.png)'); 
    } 
});

来源

2012-07-12 18:02:47 BoltClock

是的这种方法正在工作。谢谢 – Zhivko 2012-07-12 18:17:54

如何：

.someElement    { background-image: url(sheep.png); } 
.someElement.secondClass { background-image: url(sheep.png), url(betweengrassandsky.png); }

来源

2012-07-12 18:04:45 user1337

在我的情况下，第一个背景图像是动态的。 – Zhivko 2012-07-12 18:07:16

向元素添加第二个背景图像

回答

相关问题