为什么 CSS 背景位置会随着精灵高度的变化而变化？答案

【问题标题】：Why CSS Background position changes on sprite height change?为什么 CSS 背景位置会随着精灵高度的变化而变化？
【发布时间】：2013-11-06 09:54:06
【问题描述】：

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

例如，我有一个大小为 900x900 像素的 PNG 图像。我将 CSS 样式映射到正确的坐标，我在图像底部添加了 200 像素的透明空间，并且一些样式报告了不同的位置：

即使在 RFC 中，我也阅读了规范，坐标系的起点是 x=0,y=0，即图像的左上角。这对我来说没有意义:(

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

更新：所以精灵位于此 URL http://lucho.hoolwars.com/img/sprites.png

如果精灵的高度发生变化，这里有几个样式会改变坐标

.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”的高度时，这些坐标都不再有效：|

【问题讨论】：

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

标签： html css sprite background-position

【解决方案1】：

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

我相信您已经根据重复背景配置了一些精灵图像，因为您没有使用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 - Compass 可以非常轻松地制作图像精灵。有兴趣的可以看看：http://compass-style.org/help/tutorials/spriting/

希望这会有所帮助！

【讨论】：