从单个png图像中获取图标

Question

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

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;
}

Demo

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

Answer 2

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

Answer 3

使用背景速记来定位图像。

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

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