从单个PNG图像中获取图标

Question

我已经看到这种情况很多次了，但我从未使用过。有人能解释一下如何从这个单一的png图像中获取特定的图标图片，例如我用红色选择的图标...使用css吗？

- David Dury

---

它被称为CSS精灵。要理解这个，你需要知道每个图标的宽度和高度。 - Mr_Green

@Mr_Green 当有不同大小的图标时，我也有类似的想法。 - David Dury

除了以上的解决方案，还可以寻求创建此图像的设计师的帮助。 - Mr_Green

Answer 1

那被称为CSS sprites。它用于减少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。

- Mr. Alien

---

一个问题：你如何获取背景位置？我的意思是，你一直尝试直到得到正确的图片吗？有没有一种技术或工具可以做到这一点？ - David Dury

@DavidDury 无论是手动还是使用大量的精灵生成器，你都可以完成任务。 - Mr. Alien

Answer 2

1. 在元素上设置固定的（以像素为单位）height和width
2. 将图像设置为background-image
3. 调整background-position，使您想要显示的图像部分可见

- Quentin

Answer 3

使用背景缩写来定位图像。

div {
    background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px;
    width:27px;
    height:27px;
}

http://jsfiddle.net/T2EtY/1/

- max li