“我怎么能？”；继承；在CSS中使用多个图像时使用图像？

我知道我们可以向“背景图像”属性添加多个图像，如下所示：

background-image: url(image1.png), url(image2.png)

我使用的图标类共享相同的背景图像，但具有不同的前景图像：

.icon-car { background-image: url(bg.png), url(icon_car.png)
.icon-cat { background-image: url(bg.png), url(icon_cat.png)
.icon-dog { background-image: url(bg.png), url(icon_dog.png)
/* <div class="icon-car"></div> */

.icon car{背景图片：url（bg.png），url（icon_car.png）
.icon cat{背景图像：url（bg.png），url（icon_cat.png）
.icon dog{背景图片：url（bg.png），url（icon_dog.png）
/*  */

我不喜欢每次都重复“background image:url（bg.png）”。有没有一个更简短的方法？不起作用的示例：

.icon { background-image: url(bg.png) }
.icon-car { background-image-foreground: url(icon_car.png)
.icon-cat { background-image-foreground: url(icon_cat.png)
.icon-dog { background-image-foreground: url(icon_dog.png)
/* <div class="icon icon-car"></div> */

.icon{背景图片：url（bg.png）}
.icon car{背景图像前景：url（icon_car.png）
.icon cat{背景图像前景：url（icon_cat.png）
.icon dog{背景图像前景：url（icon_dog.png）
/*  */

PS：我不能使用SASS/LESS。

#容器{位置：相对；宽度：50px；高度：50px；}

#container{position:relative;width:50px;height:50px;}
.icon-bg { background-image: url('http://placehold.it/50x50/cccccc'); background-position:center; background-repeat: no-repeat;position:absolute;z-index:2;width:100px;height:100px; }
.icon-a { background-image: url('http://placehold.it/30x30/ff0000&text=A');background-repeat:no-repeat;background-position:center bottom;height:65px; }
.icon-b { background-image: url('http://placehold.it/30x30/ff7f00&text=B');background-repeat:no-repeat;background-position:center bottom;height:65px; }
.icon-c { background-image: url('http://placehold.it/30x30/ffff00&text=C');background-repeat:no-repeat;background-position:center bottom;height:65px; }

<div id="container">
    <div class="icon-bg"><div class="icon-a"></div></div>
</div>
<div id="container">
    <div class="icon-bg"><div class="icon-b"></div></div>
</div>
<div id="container">
    <div class="icon-bg"><div class="icon-c"></div></div>
</div>

.icon bg{背景图像：url（'http://placehold.it/50x50/cccccc'）；背景位置：中心；背景重复：无重复；位置：绝对；z索引：2；宽度：100px；高度：100px；} .icon-a{背景图像：url（'http://placehold.it/30x30/ff0000&text=A'）；背景重复：不重复；背景位置：中底；高度：65px；} .icon-b{背景图像：url（'http://placehold.it/30x30/ff7f00&text=B'）；背景重复：不重复；背景位置：中底；高度：65px；} .icon-c{背景图像：url（'http://placehold.it/30x30/ffff00&text=C'）；背景重复：不重复；背景位置：中底；高度：65px；}

---

您可以创建这样的内容

这是JSFIDLE

这是CSS

.icon {
    background-image: url(http://wheeeeeeee.com/wp-content/uploads/2012/01/site-background-pattern-07.jpeg);
    width: 100px;
    height: 100px;
    position: relative;
}
.icon[class]::after {
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    background-size: 35px 35px;
}
.icon.car::after { background-image: url(http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080526/1211810756.png); }
.icon.cat::after { background-image: url(http://sweetclipart.com/multisite/sweetclipart/files/cat_3_orange.png); }
.icon.dog::after { background-image: url(http://www.tomstuder.com/wp-content/uploads/2012/07/dog-011.png); }

这是HTML

<div class="icon car"></div>

<div class="icon cat"></div>

<div class="icon dog"></div>

此解决方案使用相同的html代码，只需对类名和修改的css规则进行少量修改

---

希望这对你有用。

是你的“不工作”吗示例代码不起作用是因为第一行中的图像输入错误？@Michael eh crap，希望不是因为我刚刚在几个地方更正了他的拼写lol@ChrisW.好笑。我尽量不修复代码示例中的打字错误。很难说他们是从头开始输入的示例，还是复制粘贴的。如果是复制粘贴的…好了@ChrisW.别担心，你的编辑很琐碎，不会影响问题

有没有一个较短的方法

，但绝对不会跨浏览器。谢谢！但是，我想要一个CSS解决方案。顺便说一句，这是Fabio已经建议的。无论如何，将其标记为解决方案。太好了！这就是我正在寻找的。没问题，伙计，我很高兴我能帮助你！如果你需要帮助的话ny进一步解释使用的css代码，请让我知道！：3