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

Pick an icon form icon pack for website

本文关键字：图标 一个 选择 网站      更新时间：2023-09-26

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

有没有一种方法来显示一个特定的图标从整个文件，而不创建多个较小的图像文件-也许使用javascript或css?谢谢。

p。S:这并不适用于任何移动平台，这将是一两次的事情，所以我尽量避免安装任何其他应用程序(原生或其他)来做这个小项目。

你可以为你的图标使用css精灵，这需要所有的图标在一个图像文件中，然后你可以通过使用特定宽度和高度的背景来掩盖图像的其余部分

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

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

mozilla 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;

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

是。这个方法叫做"CSS精灵"，你只需要为你的图像设置URL，并设置你的图标在图像中的背景位置。

CSS 

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

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

相关文章：