image - 我可以使用在单个图像文件中水平列出的对象作为背景吗？

Question

我正在尝试使用.png包含多个对象的单个文件来更改:hover. 与我习惯使用的其他文件的不同之处在于，此文件中的对象彼此相邻列出，而不是在彼此下方。是否可以使用这样的文件，或者图像文件中的对象是否必须在彼此之下？

这就是当其中的对象在彼此之下时我使用图像文件的方式：

.example.div {
  background : transparent url('img/info.png') bottom right no-repeat;
}

.example.div :hover {
  background : transparent url('img/info.png') top right no-repeat;
}

例如，当列出的图像文件中有两个彼此相邻的对象时，它是如何工作的？

示例文件大小：123x25px

Answer 1

您可以使用坐标。

背景位置：0px 0px；

因此，如果您的图像是 200x100（两个 100x100 方格），那么您会...

.example.div {
  background : transparent url('img/info.png') no-repeat;
  background-position: 0px 0px;
}

.example.div :hover {
  background : transparent url('img/info.png') no-repeat;
  background-position: 100px 0px;
}

Answer 2

您可以更改图像的位置以适合您的图像布局：

你是从下到上，你只想从左到右。

.example.div {
  background : transparent url('img/info.png') top left no-repeat;
}

.example.div:hover {
  background : transparent url('img/info.png') top right no-repeat;
}

或类似的东西

见演示：

http://jsfiddle.net/bdyNX/

Answer 3

假设您有一个 200px X 100px 的精灵，其中包含两个并排的 100px X 100px 图像。

现在您要分别显示每个 (100X100) 图像：

第一张图片将有background-position: 0 0;

第二张图片将具有background-position: -100px 0;（注意： x 值为 -100px）

小提琴