向元素添加第二个背景图像 [英] Add a second background-image to element

问题描述

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

问题是这将覆盖第一个背景图像，而不是组合它们。

解决方案

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

  $ '.someElement'）。each（function（）{
 if（$（this）.hasClass（'secondClass'））{
 var background = $（this）.css（'background-image' ）; 
 $（this）.css（'background-image'，background +'，url（betweengrassandsky.png）'）; 
} 
} 
  

I am wondering whether it is possible to assign second background-image to element through CSS3 or jQuery/js.

To make it clear am I aware I can make it this way:

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

The thing is I need to do it something like this:

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

The problem is this will just overwrite the first background-image instead of combining them. Is there any solution to this?

Thanks

解决方案

You'll have to repeat the first background image as you show in your first line of CSS.

If you want, you can check .someElement to see if it has the second class, and apply it using jQuery:

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

这篇关于向元素添加第二个背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！