CSS Sprites (basic writing method, how to use it), CSS Sprites

CSS Sprites (basic writing method, how to use it), CSS Sprites

To put it bluntly, you can use a style sheet to cut a large image.

Now many good websites write this, and then use an image in many locations, and then use a URL request to speed up Website access.

The slicing tool can directly export the content in the box.

This is how the slicing tool is split and cut. It is OK to combine them with the CSS genie.

Here, the CSS Sprite is used to write all the images. By default, the image position starts at the upper left corner of your div. We use background-position to show it to the left and move the cursor up.

So how can we determine the location?

With the PS slicing tool, you can directly see the position and width and height

 

------------------------------------

Original article address: Click to open the link

Find the implementation method of CSS Sprites Technology

Analysis of CSS Sprites Technology

It was originally circulated only between CSS players as a production method. later it came out with 14 Rules for Faster-Loading Web Sites, which were circulated among technicians, the first rule "Make Fewer HTTP Requests" mentioned CSS Sprites. As a result, this little goblin got angry and even appeared online generation tools, which were unstoppable. CSS Sprites has been mentioned in many blogs in China recently. The most famous example is the animations below www. google. co. kr. In the latest YUI release, CSS Sprites is also used. Almost all CSS decorative images are arranged by a 40x2000 chart. Facebook, a social networking site, recently used a 22 × 1150 image to assume all the icons. At a time, CSS Sprites were everywhere.

Principle

As we know, since the CSS revolution, HTML tends to be semantic-oriented. In general, instead of writing decorative content in the tag, the rendering task is handed over to CSS. GUI is colorful, and various beautiful images are indispensable. The Production Method in the new era is that HTML is filled with various hooks and then handled by CSS. When images are needed, the CSS attribute background-image is used to combine background-repeat and background-position, in the future, if the browser supports content, another implementation method will be added ). Our main character is, you must have guessed it, that is, background-position. By adjusting the value of background-position, the background image will appear in front of you with different appearances. In fact, the overall face of the image has not changed. Because of the changes in the image position, you only need to see it. It's like the date on the watch. Today you see it as 21, and tomorrow you see it as 22, because its position jumps up one grid. So you probably know that CSS Sprites can only be used in fixed-size boxes to block what you should not see.

We use yuisprite.png as an example. If we have such a piece of code, max represents maximization, min represents minimization, and we need to add corresponding beautiful pictures to them (so that our website can attract people, you can only sell money to sunbathe in Florida: D ):

<Div class = "max"> maximize </div>
<Div class = "min"> minimized </div>

Both classes use the same image:

. Min, max {
Width: 16px;
Height: 16px;
Background-image: url (2.16.yahoo.com/..te.png );
Background-repeat: no-repeat; // we do not want it to be tiled
Text-indent:-999em; // a method for hiding text
}

The effect is as follows:

Maximize the minimum... the remaining full text>

How to Use the CSS Sprites style generation tool?

Load the image. Double-click the image you want to locate.