CSS Sprites-simple examples allow you to quickly master the essence of CSS Sprites

During this period, I have been touched by the concept of CSS Sprites several times. One is when CSS is used as a sliding door, and the other is when yslow is used to analyze the website performance, so I became very interested in the concept of CSS Sprites. I found a lot of materials on the Internet, but unfortunately most of them are just a few words. Many of them are directly translating foreign materials, and there are also websites that directly recommend foreign materials, basically I don't understand any CSS Sprites, let alone how to use them.

The last article is in the blue ideal.ArticleInspired by those who have been thinking about it for a long time, they can figure out the meaning of the content. The following will help others to grasp CSS Sprites more quickly through their own understanding.

First, I will briefly introduce the concept. The concept is everywhere on the Internet. Here I will briefly introduce it.

What is CSS Sprites?

CSS Sprites is a CSS Sprite, but this translation is obviously not enough. In fact, it is to integrate multiple images into a pair of images, then some CSS technologies are used to deploy the website. The benefits of doing so are also obvious, because if there are too many images, HTTP requests will be added, which will undoubtedly lead to reduced website performance, especially for websites with a particularly large number of images, if you can use CSS Sprites to reduce the number of images, it will increase the speed.

Next we will use an example to understand CSS Sprites, inspired by the Blue ideal "Creating a poker series tutorial.

We only need to create a playing card, taking taotao 10 as an example.

You can directly integrate a large image with the blue ideal as the background. This is also a central idea of CSS Sprites, that is, to integrate multiple images into one image.

This is the integrated graph. I believe that those who are familiar with PS should be easy to understand. Through ps, we can combine Multiple Graphs into a single graph.

Now we write the HTML structure:

<Div class = "card">
<Div class = "Front">
<B class = "N1 N10"> </B>
<Em class = "first small_up1"> </em>
<SPAN class = "A1 up1"> </span>
<SPAN class = "A2 up1"> </span>
<SPAN class = "A3 down1"> </span>
<SPAN class = "A4 down1"> </span>

<SPAN class = "B1 up1"> </span>
<SPAN class = "B2 down1"> </span>

<SPAN class = "C1 up1"> </span>
<SPAN class = "C2 up1"> </span>
<SPAN class = "C3 down1"> </span>
<SPAN class = "C4 down1"> </span>
<Em class = "Last small_down1"> </em>
<B class = "N2 n10_h"> </B>
</Div>
</Div>

Here we will analyze and emphasize the following points:

I. Card is a box or fast for this peach, so those who know about Div should be clear about this.

II. I use three tags: Span, B, and em to represent three different types of images. span is used to represent the images in the middle of the table, and B is used to represent the number, em is used to represent small icons under a number.

3. There are two types of statements in the class: one is used to locate the position of the image in the middle of taotao 10, and the other is used to define the direction (face up, face down ).

The above is the basic concept of Div, which is not the focus, but those who are not clear about Div can understand it.

Next we will focus on defining CSS:

SPAN {display: block; width: 20px; Height: 21px; osition: absolute; Background: URL (images/card.gif) No-Repeat ;}

This is the definition of CSS for the span container, and other attributes will not be mentioned. It mainly talks about how to understand CSS Sprites from this.

Background image. You can see that the address is a big image that we first integrated. How can we display the specified position in the big image? Because we know that we are doing black peach 10, we don't need other images in this big image, and we use the CSSOverflow: hidden;

But it's strange that there is no overflow: hidden in the CSS definition of span. Don't worry. We have already set it in the CSS definition of card (this is the inheritance relationship in CSS ):

. Card {width: 125px; Height: 170px; position: absolute; overflow: hidden; Border: 1px # c0c0c0 solid ;}

It is not enough to understand this.Width: 125px; Height: 170px;This can be understood as an accurate cutting of the background image. Of course, it is not a cutting, but a hidden part of the remaining part. This is the perfect use of overflow: hidden.

Through the above sections, you will be able to fully grasp the use of CSS Sprites, through this so-called "cutting ", then, use the CSS positioning technology to accurately distribute these images to this card!

PS: CSS positioning technology. You can refer to other materials, such as relative and absolute positioning. Here we can only try absolute positioning.

Finally, let's add:

Why should we adopt a structure like <SPAN class = "A1 up1"> </span>?

The main function of the span container is to store this large background image and implement "cutting" in it. The background after cutting in the span is common in all content blocks!

Why do two attributes need to be declared in the class?

Obviously, one is used to locate the content block, and the other is used to define the face-to-face and orientation of the image in the content block!

The complete source code of taotao 10 is provided below:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Create a playing card-taotao 10 </title>
<Style type = "text/CSS"> <! --
. Card {width: 125px; Height: 170px; position: absolute; overflow: hidden; Border: 1px # c0c0c0 solid ;}
/* General settings of intermediate images */
SPAN {display: block; width: 20px; Height: 21px; position: absolute; Background: URL (http://www.blueidea.com//articleimg/2009/02/6382/00.gif) No-Repeat ;}
/* General settings for small images */
B {display: block; width: 15px; Height: 10px; position: absolute; font-size: 10pt; text-align: center; font-weight: bold; Background: URL (http://www.blueidea.com//articleimg/2009/02/6382/00.gif) No-Repeat; overflow: hidden ;}
/* General numeric settings */
Em {display: block; width: 15px; Height: 10px; position: absolute; font-size: 10pt; text-align: center; font-weight: bold; Background: URL (http://www.blueidea.com//articleimg/2009/02/6382/00.gif) No-Repeat; overflow: hidden ;}
/* Coordinate points */
. N1 {left: 1px; top: 8px ;}
. First {left: 5px; top: 20px ;}
. A1 {left: 20px; top: 20px ;}
. A2 {left: 20px; top: 57px ;}
. A3 {left: 20px; top: 94px ;}
. A4 {left: 20px; top: pixel PX ;}
. B1 {left: 54px; top: 38px ;}
. B2 {left: 54px; top: 117px ;}
. C1 {left: 86px; top: 20px ;}
. C2 {left: 86px; top: 57px ;}
. C3 {left: 86px; top: 94px ;}
. C4 {left: 86px; top: pixel PX ;}
. Last {bottom: 20px; Right: 0px ;}
. N2 {bottom: 8px; Right: 5px;
}
/* Four pictures of the big icon black and red plum-top direction */
. Up1 {background-position: 0 1px;}/* peach */
/* Four pictures of the big icon black and red plum-bottom */
. Down1 {background-position: 0-19px;}/* peach */
/* Four pictures marked as black and red-up */
. Small_up1 {background-position: 0-40px;}/* taotao */
/* Four pictures marked as black and red-bottom */
. Small_down1 {background-position: 0-51px;}/* taotao */
/* ~ K Digital Image-upper left corner */
. N10 {background-position:-191px 0px; left:-4px; width: 21px ;}
/* ~ K Digital Image-bottom right corner */
. N10_h {background-position:-191px-22px; Right: 3px; width: 21px ;}
/* ~ K Number Image-red in the upper left corner */
. N10_red {background-position:-191px 0px ;}
/* ~ K Digital Image-red in the lower right corner */
. N10_h_red {background-position:-191px-33px ;}
-->
</Style>

</Head>

Thank you for your reference!

Author: Lao Qian @ Wuhan Seo