Question

我有一张图片，其中我要用于其他目的的前80px图像，剩下的图片，我想设置为整页背景图片。

我尝试过设置：

background-position: 0px -80px

但它不起作用。

如何正确使用css精灵（背景位置）和整页背景图片？

Answer 1

其中任何一个（link或link）都会为您和相应的css生成精灵。

完成后，请使用css类作为相应的区域，例如：

.image1Background {
    background-image: url("thesprite.png"),
    left: -80px;
    top: 0px;
}

.image2Background {
    background-image: url("thesprite.png"),
    left: 0px;
    top: 0px;
}

<body class="image1Background">
    <div class="image2Background">
    </div>
</body>

Sprites通常用于很多小图标，以减少将它们下载到客户端所需的请求数量。

Answer 2

我会使用div作为80px图像，背景图像作为正文背景......如：

body { background-image: url(background.gif) }
#imgtop { height: 100%; width: 100%; background-image: url(80px_image.gif) }

CSS精灵全页背景：背景位置

2 个答案: