如何使用一个图像部分作为不同元素的背景

Question

One Pic

网站如何使用一个图像并将其部分用作不同元素的背景，如何实现。

Answer 1

他们只是使用不同的背景位置来指定他们正在使用的精灵表/图片上的哪个图像。例如，检查上面突出显示的不明飞行物图像的元素。并更改css background position to -390px，然后上下图像将与指定的正数相同。

这样做是为了减少服务器上的负载，因为现在只加载了一个Image - 主图片而不是10个不同的图片。

在此处jsFiddle看到我使用了this image，并为每个img的css代码使用了不同的背景位置。请询问您是否需要进一步澄清。

Answer 2

您可以为所需的任何范围设置此背景。要做的就是把正确的部分剪掉。

假设您有一个图像类，它是：

.sp {
    background-image: url(your/picture.png);
}

您将此类应用于需要图片的所有范围。 然后你从中剪下单张照片：

.sp.button1 {
    background-position: 20px 50px;
    height: 28px;
    width: 50px
}

（随机nubmers）

您可以使用class="sp button1"指定您的第一张照片。