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
相关问题
- Views base64 encoded blob in HTML with PHP
- Is there a way to play audio on a mobile browser w
- HTML form is not sending $_POST values
- implementing html5 drag and drop photos with knock
- Adding a timeout to a render function in ReactJS
Using background shorthand for the positioning of image.
http://jsfiddle.net/T2EtY/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 CSSbackground-position
property, so for exampleDemo
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.height
andwidth
on an elementbackground-image
background-position
so the part of the image you want to be visible is in view