Question

我有不同的精灵表（.png）。 E.A.头，眼睛，鼻子，嘴。我使用它们来使用css（sass）动态构建面。

我使用背景位置使用不同的图层和精灵构建一个面。

<span class="face caucasian-face">
    <span class="caucasian-eyes-1">
        <span class="caucasian-nose-2">
            <span class="caucasian-mouth-1">
                <span class="caucasian-chin-2">
                </span>
            </span>
        </span>
   </span>
</span>

这非常有效，我可以将面元素组合起来构建不同的面孔。

.face类的CSS：

.face {
    background: transparent url('../images/face-palette.png');
    width: 160px;
    height: 160px;
    z-index: 1;
}

叠加精灵的Css示例：

.caucasian-nose-1,
.caucasian-nose-2 {
    width: 28px;
    height: 21px;
    left: 20px;
    top: 23px;
    z-index: 2;
    background: transparent url("../images/face-sprites.png");
    background-position-x: -66px;
    background-position-y: -80px;
}

.caucasian-nose-2 {
    background-position-x: -226px;
}

因此所有尺寸均基于160px 160px计算。

.face类基本上是一个包装器。 face-palette.png与.face类（160px 160px）具有相同的尺寸，所有覆盖元素（眼睛，鼻子等.png）也设置为160px 160px。所以在没有弄乱尺寸的情况下覆盖所有尺寸的工作正常。

问题：

我想要的是能够将.face包装器的大小调整为e.a. 80px 80px并且所有叠加元素都相应地调整大小。尝试使用继承和背景大小（％）。但似乎无法让它发挥作用。

任何人都有这方面的经验吗？我的方法是否正确？而且，希望有人可以帮助我。

响应分层的背景图像

0 个答案: