Inline picture implements CSS Sprite

inline picture implements CSS SpriteContent Summary: CSS sprite is a Web page image application processing, allows us to integrate the scattered images of the page into a large image, using Background-image to select the sprite picture, width, height set the area of the picture display, Background-position sets the coordinate position of the desired picture. The CSS Sprite method to assemble multiple images into one, not only effectively reduce the HTTP request

CSS Sprite is a Web page image application processing method, allows us to integrate the scattered images of the page into a large image, using Background-image to select Sprite picture, width, height set the area of the picture display, Background-position sets the coordinate position of the desired picture. The CSS Sprite method is used to assemble multiple images into one, which not only reduces the HTTP request, but also reduces the size of the image.

Here we still need to use the sprite to assemble the picture, just use the way Chong Background-image into the inline image,@_~

first, we'll bing the CSS clip properties:

This property is used to define a clipping rectangle. For an absolutely defined element, the content within the rectangle is visible. The contents of this clipping area are processed according to the value of overflow. The clipping area may be larger than the content area of the element, or it may be smaller than the content area.

A little obscure. On the example (tinkering with the half-day, or the original is better, hehe):

Here are the same pictures with 4 arrows:

CSS Clip

First we need an IMG tag: HTML

With CSS clip, the element must be absolutely positioned , so a class= ' clip ' is required to set the default left and top positioning values. Set each individual style by a unique class of each element, as follows: CSS

. clip        {position:absolute; top:0; left:0;}


. left-top    {clip:rect (0 48px 48px 0);}

. right-top   {clip:rect (0 96px 48px 48px); left: -48px;}

. LEFT-BTM    {clip:rect (48px 48px 96px 0); top: -48px;}

. right-4     {clip:rect (48px 96px 96px 48px); Top: -48px;left: -48px;}

Note: the values in rect correspond to: top right bottom left, similar to the padding, margin settings we often use.

The clip tag is just the part of the entire sprite that is needed for a performance, but the width of the whole img is still much larger (in this case 96*96), thanks to the position:absolute, by setting the image to absolute positioning so that it out of the document flow, No matter how many pictures do not affect the other nearby elements, the top, left control elements of the offset, adjust the desired part of the picture to the appropriate position, so must be absolutely positioned.

Now the absolutely positioned IMG element floats in the document, and if you want the element to be part of the document, you can wrap a relatively positioned div outside: HTML

<div>

    

</div>

CSS

Div{width:48px;height:48px;position:relative;}

Browser Loading

Browsers are smart, and if you use the same picture in different places on the page, it will only load once. Just like the background we used to use.

Browser Compatibility

This method works well in IE6, IE7, IE8, Firefox, Opera, Safari and a series of browsers I have tested, so use it with ease.

Note : CSS rules require that you insert a comma between the clip property values (if someone is writing CSS code with aptana like me, you will see the relevant error message), but obviously the old version of IE does not like these (IE6, IE7), Fortunately, when there are no commas, they work well in the new version of the browser. follow-up thinking

There are several advantages to using image to implement a Sprite: A search engine and a screen reader are more friendly relative to an empty span or div,img tag (Alt is a good description of the content of the picture); The biggest problem with using text-indent for picture substitution is the inability to display pictures, While the CSS function when the user can not see the text content, in this case the content of Alt may be displayed; the same picture in the page, the browser will only be loaded once;

Since this is so good, why is there not much on the internet?

The biggest limitation that I think of is: for those who can't see the style, and the picture shows normal users (such as mobile phone users), open the page in a few lines to see a lot of small pictures to put together a spite picture experience but very bad.

Even if you need to master, as to how to use it to weigh their own.