How to use CSS sprites to put a lot of small plots on a picture

This article mainly introduces about how to use CSS sprites to put a lot of small pictures on a picture, has a certain reference value, now share to everyone, have the need for friends can refer to

Web page Production WEBJX article introduction: in Google search for CSS Sprites this name, will find a lot of information, and with SEO more and more people pay attention to the use of this technology to optimize the image of the site more and more, several large domestic portals are emulated. such as Sina, NetEase, Sohu. You download the map on their website

Search in Google css sprites this name, will find out a lot of information, and with SEO more and more people pay attention to the use of this technology to optimize the image of the site more and more, several large domestic portals are emulated. such as Sina, NetEase, Sohu. You download the pictures on their website and you will see that they integrate a lot of small pictures into one picture

Search in Google css sprites this name, will find out a lot of information, and with SEO more and more people pay attention to the use of this technology to optimize the image of the site more and more, several large domestic portals are emulated. such as Sina, NetEase, Sohu. You download the pictures on their website and you will see that they integrate a lot of small pictures into one picture .
The benefits of doing this are unspoken:

1. Accelerated image display using CSS techniques to reduce HTTP requests for website optimization seo

In fact, the principle is very simple, mainly in the application of CSS background positioning technology to achieve. The main thing is to use a property background-position to control the display of a large picture of a specified size of the picture position.
CSS Sprites picture background optimization technology
Here's a more interesting example of how to make a poker game and see how to position the picture in one step.
First we analyze poker, a card has two colors, there are four patterns of spades, hearts, clubs, squares. In addition, there are j,q,k, these three kinds are flower cards. There are only four patterns in the a~10, and three flower cards use three pictures, and their position is different, but there are only a few changes, such as A-7 This is a change, it is a three row three column layout (A and 2 is its special case), 8-10 is one, it is four rows three columns. J,q,k is a (in fact, it is also the first variant of the special case).
Know the principle is good to do, we first make their pictures, a card, spades, Hearts, plum, block big picture each one, small picture each one, j,q,k pattern each one, the background picture.
In addition to do all the digital picture 13, 270 degrees flip picture 13.
OK, all the pictures are ready, a total of 71 pictures, hey, a little scary, so many pictures, did not think of it (later will introduce a more convenient approach, without pictures, first sell a xiaoguanzi, a bit)
We take the Spades 10 as an example to look at the coordinates of the point, is in the PS with the auxiliary line to do the effect:

Figure A
Note that the contents of each card are flipped vertically with the upper part, which is why the numbers are also made into pictures.
So we can combine all the pictures in PS, two:

Figure II
In the combination of this picture to note that each picture is complete, can not be overlapped by other images, and to accurately calculate the coordinate position of each picture, such as its top-left corner vertex coordinates, and the bottom right corner of the vertex coordinates, know that the two coordinate points, the location of each small picture can be calculated all out.
Once the picture is ready, let's start designing the structure, because the spades 10 is the most used for all poker, so let's take it for example.
HTML structure:

CSS style:

I first define the style of the total container for a poker card:

. card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 Solid;}

I set it to a fixed width and height value, and add a border line, set its absolute positioning is to lay the foreshadowing for later positioning. Because I would probably do more than one card. Later, when you extend it, you only need to add the left and top properties to it to position it in a different place. And when it is set to absolute positioning, its sub-container can be positioned against it.
I use Span,b,em three kinds of tags represent three different types of pictures, span used to table the middle of the picture, B is used to denote the number, EM used to represent the small icon below the number.

Each of the above spans represents a coordinate point, writes the common section to a style, facilitates the invocation of other structures, and then applies it to a coordinate point, such as <span class= "A1 up1" ></span>.

Its style is defined as follows:

span{display:block;width:20px;height:21px; Osition:absolute;background:url (images/card.gif) no-repeat;}

The above style is the universal setting for defining the middle of the 10 spades picture containers. Set them to block, and fixed size, set their absolute positioning, so that it can be defined to the location you want to specify.

. a1{left:20px;top:20px;}

This style is the locator, offset to the specified coordinate point, the other 9 principles similar.

. up1{background-position:0 1px;} /* Spades */.down1{background-position:0 -19px;} /* Black peach vertically flipped */

These two styles are loaded into the picture, because each piece of the map in the coordinates of the position is different, so you have to find the position of the previous image of each small image of the exact location.
Now that you've built the HTML structure, set the style for the structure, assemble all the content, and our spades 10 is done, it's easy!
All right, one card is done, the other poker comprehend by analogy.
We also need to add a picture to realize the effect of playing poker. This picture is not added to the image collection above because it is going to be tiled.

Finally, all the content is integrated, a complete poker even if finished!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!