无法获取CSS Sprite工作。我做错了什么？ [英] Can't get CSS Sprite to work..what am I doing wrong?
问题描述
我使用 CSS Sprite Generator 为我正在处理的网页创建精灵，但它似乎不工作，我不知道为什么...我想这是明显的东西，但...！
I am using CSS Sprite Generator to create sprites for a web page I am working on, but it doesn't seem to work, and I don't know why...I guess it's something obvious but..!
所以，我拿起3张图片，压缩，生成的PNG文件（我检出的结果，它似乎很好），我得到以下css类：
So, I picked up 3 images, zipped, generated the PNG file (I checked out the result it is seems fine) and I got the following css classes back:
.sprite-welcom1 { background-position: 0 -30px; }
.sprite-welcom3 { background-position: 0 -109px; }
.sprite-3 { background-position: 0 -188px; }
所以这里是我测试的HTML，由于某种原因，我得到的是一个很好的空白页：
So here is the HTML I am testing on, and for some reason all I get is a nice blank page:
<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上的其他人。
Don't use a generator. Take the time to do it yourself from scratch. Then next time you use this method, you'll know what to look for when something has gone wrong and you'll answer your own question, and heck, maybe someone else's on Stack Overflow.
这个生成器没有为你的样式生成任何有意义的类名，这意味着如果你去编辑它们，你不会从星期二知道两个类，除非你记住了数字。
This generator isn't producing any meaningful class names for your styles, which means if you go to edit them later you're not going to know two classes from Tuesday what's going on unless you've memorized the numbers. Meaningful names will save you headaches when you return to your stylesheet later on.
打开Photoshop，GIMP或几乎任何现代图像编辑软件。确保您的程序已打开标尺选项，并以此方式测量元素的背景图像坐标。在没有统治者的情况下 - 这可能是稀罕的，你可以随时使用 MeasureIt Firefox扩展和在标签中打开的.png。
Open up Photoshop, GIMP, or almost any modern image editing software. Make sure your program has the rulers option switched on, and measure your element's background image coordinates this way. In the absence of rulers - which is probably a rarity, you could always fudge around with the MeasureIt Firefox extension and the .png opened in a tab.
这篇关于无法获取CSS Sprite工作。我做错了什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
