Html 从单个png图像获取图标

到现在为止，我已经看过很多次了，但我从未使用过自己。有人能解释一下如何从这张png图片中获得特定的图标图片，例如我用红色选择的图标。。。使用css

被称为。它用于减少http请求。基本上，所有图标都放在一个画布上，用作

背景图像

属性，之后使用CSS

背景位置

属性映射，例如

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

因此，在短时间内，只需为元素定义一个固定的高度/宽度，然后使用

background position

属性映射画布。因此，如果一个页面上有100个小图标图像，它将向服务器发出100个请求，因此为了提高性能，将使用CSS精灵

在元素上设置固定的（以像素为单位）

高度

和

宽度

将图像设置为背景图像

调整

背景位置

，使希望可见的图像部分在视图中

---

使用背景速记对图像进行定位

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

---

它被称为css精灵。要理解这一点，你需要知道每个图标的宽度和高度。@U!Green先生，当有不同大小的图标时，我会选择相同的图标。。除了下面的解决方案，还需要创建此图像的设计师的帮助。一个问题：如何获得背景位置？我的意思是你在得到正确的图片之前一直在尝试？有没有一种技术或工具可以做到这一点？@davidbury要么手动，要么你会得到大量的信息