Question

我知道我们可以将多个图像添加到background-image-property中，如下所示：

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> */

我不想每次都重复“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> */

PS：我不能使用SASS / LESS。

Answer 1

#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>

http://jsfiddle.net/yu7nc7t5/

Answer 2

你可以创建这样的东西......

这是JSFiddle

http://jsfiddle.net/d3317xgg/

这是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规则进行微小修改。

希望这适合你。

在CSS中使用多个图像时，如何“继承”图像？

2 个答案: