css - 在 CSS 中使用多张图片时，如何将一张图片设为 "inherit"？

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

我不喜欢每次都重复“背景图片: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

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

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

希望这对你有用。