从单个图像获取图标

问题描述：

我已经看到这么多次，直到现在，但我从来没有使用过自己。可以有人解释如何从这个单一的png图像获得特定的图标图片，例如我用红色...选择的图标使用css

I have seen this so many times until now, but I never used myself. Can somebody explain how you can get specific icon picture from this single png image, for example the icons i selected with red ... using css

答

被称为 CSS sprites 。它用于减少http请求。基本上所有图标都放在一个画布上，用作 background-image 属性，稍后使用CSS background-position 属性，例如

That is called CSS sprites. It is used to cut down the http requests. Basically all icons are placed on a single canvas and are used as background-image property and later they are mapped using CSS background-position property, so for example

.icon1 {
   background-image: url('YOUR_URL_HERE');
   background-position: 10px 10px; /* X and Y */
   height: 30px;
   width: 30px;
}

演示

因此，您只需为元素定义一个固定的高度/宽度，然后使用 background-position 属性。因此，如果您在一个页面上有100个小图标图像，它将向服务器发出100个请求，从而提高性能，使用CSS Sprite。

So inshort just define a fix height/width to your element, and than map the canvas using background-position property. Hence, if you have 100 small icon images on a page, it will make 100 requests to the server, thus to increase the performance, CSS Sprites are used.

相关推荐