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

Question

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