我正在使用CSS Sprite Generator为我正在处理的网页创建精灵,但它似乎不起作用,我不知道为什么......我猜它是显而易见的但是......!
所以,我拿起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>
有小费吗？
小智 8
不要使用发电机.花点时间从头开始做.然后下次你使用这种方法时,你会知道在出现问题时要寻找什么,你会回答你自己的问题,而且,也许其他人在Stack Overflow上.
这个生成器没有为你的样式生成任何有意义的类名,这意味着如果你以后去编辑它们,除非你记住这些数字,否则你不会从星期二开始知道两个类是什么.当您稍后返回样式表时,有意义的名称将使您感到头疼.
打开Photoshop,GIMP或几乎任何现代图像编辑软件.确保您的程序已打开标尺选项,并以这种方式测量元素的背景图像坐标.在没有统治者的情况下 - 这可能很罕见,你可以随时使用MeasureIt Firefox扩展并在选项卡中打开.png.
| 归档时间： |
|
| 查看次数： |
5858 次 |
| 最近记录： |