我在用CSS 精灵生成器 http://spritegen.website-performance.org/为我正在开发的网页创建精灵，但它似乎不起作用，我不知道为什么......我想这是显而易见的事情，但是......！
所以，我选取了 3 张图像，压缩，生成了 PNG 文件（我检查了结果，看起来不错），然后我得到了以下 css 类：
.sprite-welcom1 { background-position: 0 -30px; }
.sprite-welcom3 { background-position: 0 -109px; }
.sprite-3 { background-position: 0 -188px; }
这是我正在测试的 HTML，由于某种原因，我得到的只是一个漂亮的空白页面：
<html>
<head>
<style>
.sprite-welcom1 { background-position: 0 -30px; }
.sprite-welcom3 { background-position: 0 -109px; }
.sprite-3 { background-position: 0 -188px; }
.sprite-bg {
background: url(csg-495a902b04181.png) no-repeat top left;
}
</style>
</head>
<body>
<div class="sprite-bg sprite-3"></div>
</body>
</html>
有小费吗？
不要使用发电机。花时间从头开始自己做。然后下次你使用这个方法时，你就会知道当出现问题时要寻找什么，并且你会回答你自己的问题，而且，也许其他人在 Stack Overflow 上。
该生成器不会为您的样式生成任何有意义的类名称，这意味着如果您稍后去编辑它们，您将不会知道周二的两个类发生了什么，除非您记住了这些数字。当您稍后返回样式表时，有意义的名称将让您省去麻烦。
打开 Photoshop、GIMP 或几乎所有现代图像编辑软件。确保您的程序已打开标尺选项，并以这种方式测量元素的背景图像坐标。在没有统治者的情况下——这可能是罕见的，你总是可以用测量它 https://addons.mozilla.org/en-US/firefox/addon/539Firefox 扩展和在选项卡中打开的 .png。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
