从一个PNG文件中的许多图像选择图像

我的问题是，当开发任何网站，我使用许多图像停止，下一步，返回，prev做一些东西，我把它们放在不同的文件夹，并单独访问它们。但是，当我看到其他网站，并尝试获取图像，如回复，发布，搜索，以便我可以将它们用于我的网站或使用颜色组合的方式，他们有使用。我看到的是，我在一个PNG图像中获得了许多图像。我想问的是，将所有图像放在一个PNG图像中，并从那里访问一张图像时，他们如何从这些图像访问特定图像。如果任何人可以提供一些代码，那么这将是非常好的，也是优点和缺点。在此先感谢。从一个PNG文件中的许多图像选择图像

来源

2014-10-29 kedar

我想你指的是什么精灵。 Sprite是一个.png图像中的小图标的集合。这样做的好处是提高了网站加载的速度，这些小图标被分组在一起，这导致一个小的PNG图像与这些imgs单独存储的每个图像进行比较。

然后通过背景位置访问精灵中的图像。

最好的例如 http://www.spritecow.com

来源

2014-10-29 11:01:12

嗨，感谢您的快速回复......并且我了解它是什么，但是......我如何在我的网站中使用Sprite的东西...... plz帮我解决这个问题....必须使用代码或者是否有像这样的现成的东西.... – kedar 2014-10-29 11:43:14

你必须在Photoshop中创建精灵。它可以是任何宽度和高度，并且背景必须是透明的，根本没有背景。之后，拖动此PSD上的图标/图像并以适当的方式放置它们，在这些图像之间留出适当的空间。完成后，将其保存为png。 http://css-tricks.com/css-sprites/ 向下滚动到最后，你可以看到精灵的例子。加载spritecow.com中的精灵，你将能够获得他们每个人的BG位置，复制并粘贴到你的CSS代码。 – 2014-10-29 11:57:51

阅读关于CSS sprites。例如：

http://alistapart.com/article/sprites

http://css-tricks.com/css-sprites/

http://spritegen.website-performance.org/

来源

2014-10-29 10:59:04 leonbloy

从一个PNG文件中的许多图像选择图像

回答

相关问题