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

我想知道是否可以通过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); } 

问题是这只会覆盖第一个背景图像而不是组合它们。 这有什么解决方案吗？

谢谢

Answer 1

当您在第一行CSS中显示时，您将不得不重复第一个背景图像。

如果需要，可以检查.someElement以查看它是否具有第二个类，并使用jQuery应用它：

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

Answer 2

怎么样：

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