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

Question

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

Answer 1

这就是所谓的CSS sprites。它用于减少http请求。基本上所有图标都放在一个画布上并用作background-image属性，然后它们使用 CSSbackground-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

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/