Html 为什么CSS背景位置随精灵高度变化而变化？

我的网站上发生了一些有趣的事情。它正在积极开发中，我不断向网站的sprite PNG文件添加内容。有时我添加了太多的图标和块，需要更改图像的高度，但当我这样做时，一些（不是全部！）元素会出现在不同的位置

例如，我有一个大小为900x900像素的PNG图像。我将CSS样式映射到适当的坐标，我在图像底部添加了200像素的透明空间，一些样式报告了不同的位置：<破坏网站周围的东西。所以每次我增加sprite文件时，我必须打开各种CSS文件并添加X像素（我添加的高度）。我甚至在精灵的顶部添加了一个1px的基线，这样我就可以确定我没有改变任何位置，只是改变了高度

我甚至在RFCs中阅读了规范，坐标系的起点是x=0，y=0，这是图像的左上角。这对我来说毫无意义：(

更新：一些给我带来bug的容器是用正坐标而不是负坐标制作的。我仍然无法向自己解释为什么会发生这样的事情

更新：所以精灵位于这个URL

如果精灵的高度改变，这里有一些样式会改变坐标

.job-summary {
width: 330px;
height: 45px;
background: transparent url(/img/sprites.png) -15px 435px;
cursor: default;
}

.popup-title {
background: url('../img/sprites.png') -425px -1077px transparent;
width: 275px;
color: black;
font-weight: normal;
}

.popup-close {
position: absolute;
background: url('../img/sprites.png') -771px -972px transparent;
right: -9px;
top: -22px;
width: 38px;
height: 38px;
z-index: 2;
cursor: pointer;
}

---

每次我更改“sprites.png”的高度时，这些坐标都不再有效：|

我想我知道发生了什么。很难解释，但我会试一试

我相信您已经根据重复的背景配置了一些精灵图像，因为您没有使用

no repeat

。每次向精灵添加更多图像时，在重复图像上配置的任何图标都将移动

您需要：

1） 将

no repeat

添加到您的背景中（使用重复图像的任何图标现在都可能为空白）

2） 将所有类重新配置为使用负值（始终为图像精灵使用负值）

我建议您将精灵设置为类似以下内容：

CSS

.sprite-map {
  background: url(sprites.png) no-repeat;
}

.job-summary {
  background-position: -80px 0;
  width: 100px;
  height: 80px;
}

.popup-title {
  background-position: -15px -100px;
  width: 200px;
  height: 100px;
}

.popup-close {
  background-position: -15px -472px;
  width: 50px;
  height: 50px;
}

HTML

<div class="job-summary sprite-map"></div>
<div class="popup-title sprite-map"></div>
<div class="popup-close sprite-map"></div>

这样，您只需要指定一次精灵的URL。现在，当您将图像添加到精灵的底部或右侧时，其他任何内容都不会受到影响

此外，如果你熟悉Sass-指南针使图像精灵难以置信地容易。如果您感兴趣，可能值得一看：

---

希望这有帮助

我们可以看看你的网站吗？恐怕不行，我现在只有开发者环境，但我可以展示sprite和示例CSS。是的，请-否则人们只能猜测可能的问题。更新了主要帖子！负像素值表示距离精灵的“底部”和/或“右侧”。如果它们都是正值，你可能就不会有这个问题了。。。