我的网站上发生了一些有趣的事情。它正在积极开发中,我不断向网站的 sprite PNG 文件添加和添加内容。有时我添加了很多图标和块,以至于我需要更改图像的高度,但是当我这样做时,一些(不是全部!)元素会出现在不同的位置。
例如,我有一个大小为 900x900 像素的 PNG 图像。我将 CSS 样式映射到正确的坐标,我在图像底部添加了 200 像素的透明空间,并且一些样式报告了不同的位置:< 破坏网站周围的东西。所以每次我增加sprite文件,我都要打开各种CSS文件并添加X个像素(我添加的高度量)。我什至在精灵的顶部添加了一个 1px 的基线,这样我就可以确定我没有改变任何位置,而只是改变了高度。
我什至在 RFC 中阅读了规范,坐标系起点位于 x=0,y=0 处,即图像的左上角。这对我来说没有意义:(
更新:一些给我错误的容器是用正坐标而不是负坐标制作的。我仍然无法向自己解释,为什么会发生这样的事情。
更新:所以精灵位于此 URL http://lucho.hoowars.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”的高度时,这些坐标都不再有效:|