CSS - 背景位置 - 在普通图片和 Sprite 的情况下

Question

所以在 CSS 中，我收集到背景位置的使用可用于控制您想要放置图片的位置(单个图像)。

background-position: 0px 0px;

将从左上角定位图像。

但是，当向我介绍 sprite 的概念时，我感到困惑，因为我认为当您更改 x 和 y px 的值时，您只是将图像移动到网站上的不同区域，而不是选择哪个您要使用的 Sprite 中的图像。假设我们有一个 Sprite ，应该没有什么区别

 background-position: 0px 0px;

和

 background-position: 30px 30px;

将同一个图标向右移动 30 像素并向下移动 30 像素？

然而，在其他教程中，图像的位置并没有改变。相反，他们可以使用 background-position 根据 Sprite 的坐标选择 Sprite 内的图像。

我很困惑。

Answer 1

所以 sprite 有不止一张图片拼接在一起。 .. 所以只有一张图片(大图片由小图片组成)。

现在假设您使用该 Sprite 作为 div 的背景。

现在澄清你的疑问.. 假设 div 是一个窗口，通过它你只能看到图像的特定部分..所以在 sprite 中，我们首先只显示图像的特定部分，我们该怎么做？

通过给定初始背景位置值将 Sprite 的那部分定位在窗口后面(即div)

现在，当您更改大 Sprite 图像移动的背景位置时(请记住只有一个由小图像组成的大图像)..所以当它移动时， Sprite 的其他部分通过窗口可见(即 div 的背景图像发生变化)

这就是通过 div 可见新图像的方式...

这样理解

它不一定是新图像，而是 Sprite 图像的其他部分，当背景位置改变时你会看到

看看这是否有帮助 https://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/