从单个PNG图像获取图标

直到现在我已经看过这么多次了，但我从来没有用过我自己。有人能解释一下你怎么可以从这个单一的PNG图像获得特定图标的图片，例如我选择红色的图标...使用CSS从单个PNG图像获取图标

enter image description here

2013-08-12 David Dury

这就是所谓的CSS精灵。要理解这一点，你需要知道每个图标的宽度和高度。 –

@Mr_Green我有点不一样的时候有不同的大小图标.. –

添加到下面的解决方案，也采取创建此图像的设计师的帮助。 –

这就是所谓的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; 
}

所以inshort只是限定修复高度/宽度您的元素，并使用background-position属性映射画布。因此，如果您在页面上有100个小图标图像，它将向服务器发出100个请求，因此为了提高性能，将使用CSS Sprites。

2013-08-12 06:31:51

一个问题：你如何获得背景位置？我的意思是你尝试，直到你得到正确的图片？有没有这样的技术或工具？ –

@DavidDury无论是手动还是您将获得大量[sprite生成器]（https://www.google.com/search?q=css+sprite+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla： EN-US：官方与客户端=火狐-A） –

2013-08-12 06:32:19 Quentin

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

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

2013-08-12 07:01:36

回答