从单个png图像中获取图标

Question

到目前为止,我已经看过很多次,但我从未使用过自己.有人可以解释如何从这个单一的png图像中获取特定的图标图片,例如我用红色选择的图标...使用css

在此输入图像描述

Answer 1

这叫做CSS精灵.它用于减少http请求.基本上所有图标都放在一个画布上并用作background-image属性,然后使用CSS background-position属性进行映射,例如

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

因此,只需为元素定义修复高度/宽度,然后使用background-position属性映射画布.因此,如果页面上有100个小图标图像,它将向服务器发出100个请求,从而提高性能,使用CSS Sprites.

Answer 2