Question

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

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

我甚至在RFC中读取了规范，坐标系起始位于x = 0，y = 0，即图像的左上角。这对我来说没有意义:(

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

更新：因此精灵位于此网址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;
}

每次我改变＆＃34; sprites.png＆＃34;的高度那些坐标不再有效：|

Answer 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 - 指南针使图像精灵非常容易。如果您有兴趣，可能值得一看：http://compass-style.org/help/tutorials/spriting/

希望这有帮助！

为什么CSS背景位置会改变精灵高度？

1 个答案: