为网站选择一个图标形式的图标包答案

【问题标题】：Pick an icon form icon pack for website为网站选择一个图标形式的图标包
【发布时间】：2014-06-04 13:48:29
【问题描述】：

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

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

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

【问题讨论】：

是的，你可以这样做。它叫精灵..试试这个 - 背景：url（yourimage.png）no-repeat 100px 10px;并设置宽度和高度

标签： javascript html css image icons

【解决方案1】：

您可以为您的图标使用 css sprite，这要求所有图标都在一个图像文件中，然后您可以使用具有特定宽度和高度的背景来掩盖图像的其余部分

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

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

【讨论】：

【解决方案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;

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

是的。这个方法叫做“CSS Sprites”，你只需要为你的图片设置 URL 并设置你的图标在图片中的背景位置。

CSS

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

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

【讨论】：