I have seen this so many times until now, but I never used myself. Can somebody explain how you can get specific icon picture from this single png image, for example the icons i selected with red ... using css
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
回答1:
That is called CSS sprites. It is used to cut down the http requests. Basically all icons are placed on a single canvas and are used as background-image
property and later they are mapped using CSS background-position
property, so for example
.icon1 {
background-image: url('YOUR_URL_HERE');
background-position: 10px 10px; /* X and Y */
height: 30px;
width: 30px;
}
Demo
So inshort just define a fix height/width to your element, and than map the canvas using background-position
property. Hence, if you have 100 small icon images on a page, it will make 100 requests to the server, thus to increase the performance, CSS Sprites are used.
回答2:
- Set a fixed (in pixels)
height
andwidth
on an element - Set the image as the
background-image
- Adjust
background-position
so the part of the image you want to be visible is in view
回答3:
Using background shorthand for the positioning of image.
div {
background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px;
width:27px;
height:27px;
}
http://jsfiddle.net/T2EtY/1/