html - 从单个 png 图像获取图标

Question

到现在为止我已经见过很多次了，但是我从来没有用过自己。有人可以解释一下如何从这个单一的 png 图像中获取特定的图标图片，例如我用红色选择的图标......使用 css

Answer 1

那叫CSS sprites .它用于减少 http 请求。基本上所有图标都放在一个 Canvas 上，并用作 background-image 属性，然后使用 CSS background-position 属性映射它们，例如

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

Demo

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