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

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