Question

我在一个文件中有一堆图标/图像。我试图从该文件中选择一些图标，而不是将文件切割成较小的图像文件。

有没有办法在不创建多个较小的图像文件的情况下显示整个文件中的特定图标 - 可能使用javascript或css？感谢。

PS：这不适用于任何移动平台，这将是一两次 - 所以我试图避免安装任何其他应用程序（本机或其他）来做这个小项目。

Answer 1

您可以使用css精灵作为图标，这需要所有图标都在1个图像文件中，然后您可以使用具有特定宽度和高度的背景遮罩图像的其余部分

img.home{
 width:46px;
 height:44px;
 background:url(img_navsprites.gif) 0 0;
}

您可以在此处阅读更多内容：http://www.w3schools.com/css/css_image_sprites.asp

Answer 2

Mozzilla developer Network on sprites

这可以使用常规CSS来完成：

div {
  height: Npx; /*Height of the part of the sprite sheet*/
  width: Npx; /*Width of the part of the sprite sheet*/
  background:url(sprite.png); /*The file path of the sprite sheet*/
  background-position:Npx Npx; /*The position of the sprite*/
}

N是指只有您知道的数字。

使用background-position，第一个参数是Y轴（向上和向下），第二个参数是x轴（左和右）。

您可以缩短为：

background:url(sprite.png) Npx Npx;

如果你想设置比精灵稍大的高度，你可以做一些其他的技巧，如：

background-position:100%;

或只是使用

background-repeat:no-repeat;

Answer 3

查看此网站：http://spritegen.website-performance.org/ 它是一个在线精灵生成器，只需上传你的图像，标记里面的区域并下载生成的css。

Answer 4

是。这种方法称为＆＃34; CSS Sprites＆＃34;您只需为图像设置网址，并在图片中设置图标的背景位置。

<强> CSS

.your-block {
    background:url(icon-pack.png) 0 0;
}

其中＆＃34; 0＆＃34; ＆＃34; 0＆＃34;您在此图像中的背景位置坐标。要拥有此坐标，您可以访问http://www.spritecow.com/ - 这是为精灵创建CSS的简单服务

为网站选择一个图标表单图标包

4 个答案: