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;
}