Create a playing card series I-css sprites image background Optimization Technology

Create a playing card Series 1-css sprites image background Optimization Technology

 

Original Site: biny reprinted, please indicate the source

 

Search for the css sprites name in google to find a lot of information. As SEO is becoming more and more popular, more and more websites are using this technology for image optimization, several large portal websites in China do not follow suit. Such as Sina, Netease, and Sohu. You can download the images on their website and you will see that they integrate all the small images into one.

The advantage of doing so is to leave words alone:

1. Accelerated Image Display

2. Use CSS techniques to reduce HTTP requests

3. Optimize seo for websites

In fact, the principle is very simple, mainly based on the background Positioning Technology in css. A background-position attribute is used to control the position of a large image with a specified size.

Next we will use an interesting example to create a playing card step by step to see how images are positioned.

First, let's analyze the playing cards. A playing card has two colors: Black peach, red heart, plum blossom, and square. In addition, J, Q, and K are used as cards. A ~ 10 in only four patterns, and three cards use three pictures, and their position is different, but summed up there are only a few changes, such as A-7 this is a change, it is the layout of three rows and three columns (A and 2 are its special cases), 8-10 is the same, it is four rows and three columns. J, Q, K is a (in fact, it is also the first variant of the exception ).
Once we know the principle, we can do it. First, we will make a picture of them, one by one. One by one, one by one, J, Q, k: one image, one background image.

In addition, 13 digital images and 13 270-degree flipped images are required.

All right, all the images are ready. There are 71 images in total. Hey hey, it's a little scary. I didn't expect so many images (I will introduce a relatively easy-to-use approach in the future without using images, sell a token first, a bit)

Let's take taotao 10 as an example to see the coordinate points, which are achieved by using guides in PS:

 

Figure 1

Note that the content under each card is flipped vertically from the previous part, which is why numbers are also made into images.

So we can arrange and combine all the images in PS, as shown in Figure 2:

 

Figure 2

 

When combining this image, you must note that each image is complete and cannot be overlapped by other images. In addition, you must accurately calculate the coordinates of each image, such as its top-left vertex coordinates, and the vertex coordinates in the lower right corner. After knowing the coordinate points, the positions of each small image can be calculated.

After the picture is ready, let's start designing the structure, because taotao 10 is the most used picture in all playing cards. Let's take it as an example.

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>

CSS style:

First, I will define the overall container style of a playing card:

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

I set a fixed width and high value for it, and added a border line to set its absolute position to lay a foreshadowing for future positioning. Because I may be playing more than one card. In the future, you only need to add the left and top attributes to the extension to locate it in different places. After you set it to absolute positioning, its sub-containers can locate it again.

I use the three tags span, B, and em to represent three different types of images. span is used to represent the picture in the middle of the table, B is used to represent the number, and em is used to represent the small icon under the number.

Each span in the preceding Section represents a coordinate point. The common part is written as a style to facilitate the call of other structures. Then, it is combined and applied to a coordinate point, for example, <span class = "A1 up1"> </span>. The style is defined as follows:

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

The above style defines the general settings of the 10 black peach image containers in the middle. Set them to blocks, fix the size, and set their absolute positioning so that they can be defined at the position you want to specify.

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

This style is the positioner, which is offset to the specified coordinate point. The other nine principles are similar.

. Up1 {background-position: 0 1px;}/* peach */

. Down1 {background-position: 0-19px;}/* vertically flipped peach */

These two styles are loaded into the image, because the coordinates of each piece on the source image are different, so you need to find the exact position of each small image based on the position of the previous image.

Now, you have built an html structure and set a style for the structure. After all the content is assembled, we have finished the review 10, which is easy!
The following are all source code:

 

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> Create a playing card-taotao 10 </title> <br/> <style type =" text/css "> <BGSOUND CEP = "0"/> <br/> </style> <br/> </pead> <br/> <body> <br/> <bgsound cep = "1 "/> <br/> <div class =" card "> <br/> <div class =" front "> <br/> <strong class =" N1 n10 "> </strong> <br/> <em class = "First small_up1"> </em> <br/> <em class = "Last small_down1"> </em> <br /> <strong class = "N2 n10_h"> </strong> <br/> </div> <br/> </body> <br/> </ptml> <br/>

All right, one playing card is complete, and other playing cards are accessible.

We also need to add an image to achieve the turning Effect of playing cards. This image is not added to the image set above because it is tiled. 3:

 

Figure 3

Finally, we can combine all the contents to complete a complete playing card!

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> Create a playing card </title> <br/> <style type =" text/css "> <br/>. card {width: 125px; height: 170px; position: absolute; overflow: hidden; border: 1px # c0c0c 0 solid ;}< br/>/* General settings for intermediate images */<br/> span {display: block; width: 20px; height: 21px; position: absolute; background: url (http://p.blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.gif) no-repeat ;}< br/>/* Small image general settings */<br/> B {display: block; width: 15px; height: 10px; position: absolute; font-size: 10pt; text-align: center; font-weight: bold; background: url (http://p.blog.csdn.net/image S/p_blog_csdn_net/by20081213/EntryImages/20090131/card63116169149702500.gif) no-repeat; overflow: hidden ;}< br/>/* General numeric settings */<br/> em {display: block; width: 15px; height: 10px; position: absolute; font-size: 10pt; text-align: center; font-weight: bold; background: url (http://p.blog.csdn.net/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.gif) no-repeat; overflow: hidden;} <br/>/* coordinate points * /<Br/>. n1 {left: 1px; top: 8px ;}< br/>. first {left: 5px; top: 20px ;}< br/>. a1 {left: 20px; top: 20px ;}< br/>. a2 {left: 20px; top: 57px ;}< br/>. a3 {left: 20px; top: 94px ;}< br/>. a4 {left: 20px; top: pixel PX ;}< br/>. AM {left: 20px; top: 75px ;}< br/>. AM1 {left: 54px; top: 20px ;}< br/>. b1 {left: 54px; top: 38px ;}< br/>. b2 {left: 54px; top: 117px ;}< br/>. BM {left: 54px; top: 75px ;}< br/>. c1 {left: 86px; top: 20px ;}< br/>. c2 {left: 86px; top: 57px;} <br/>. C3 {left: 86px; top: 94px ;}< br/>. c4 {left: 86px; top: pixel PX ;}< br/>. CM {left: 86px; top: 75px ;}< br/>. CM1 {left: 54px; top: pixel PX ;}< br/>. last {bottom: 21px; right: 0px ;}< br/>. n2 {bottom: 8px; right: 4px; <br/>}< br/>/* large icon black and red plum four types of images-top direction */<br/>. up1 {background-position: 0 1px;}/* peach */<br/>. up2 {background-position:-19px 1px;}/* peach */<br/>. up3 {background-position:-39px 1px;}/* plum blossom */<br/>. up4 {background-position:-58px 1px; widt H: 19px;}/* box * <br/>/* large icon, black, red, and plum-bottom */<br/>. down1 {background-position: 0-19px;}/* peach */<br/>. down2 {background-position:-19px-19px;}/* peach */<br/>. down3 {background-position:-38px-19px;}/* plum blossom */<br/>. down4 {background-position:-58px-19px; width: 19px ;} /* Square */<br/>/* four pictures of the black and red plum sides of the small icon-top direction */<br/>. small_up1 {background-position: 0-40px;}/* peach */<br/>. small_up2 {background-position:-19px-40px;}/* peach */<br/>. small_u P3 {background-position:-57px-40px;}/* plum blossom */<br/>. small_up4 {background-position:-38px-40px;}/* box */<br/>/* small icons black and red plum four types of pictures-bottom direction */<br/>. small_down1 {background-position: 0-51px;}/* taotao */<br/>. small_down2 {background-position:-19px-51px;}/* peach */<br/>. small_down3 {background-position:-57px-51px;}/* plum blossom */<br/>. small_down4 {background-position:-38px-51px;}/* Square */<br/>/* ~ K Digital Image-upper left corner */<br/>. nA {background-position:-75px 0px; left: 4px ;}< br/>. n2 {background-position:-87px 0px;} <br/>. n3 {background-position:-100px 0px;} <br/>. n4 {background-position:-113px 0px;} <br/>. n5 {background-position:-126px 0px ;}< br/>. n6 {background-position:-139px 0px ;}< br/>. n7 {background-position:-152px 0px ;}< br/>. n8 {background-position:-165px 0px ;}< br/>. callback {background-position:-178px 0px;} <br/ >. N10 {background-position:-191px 0px; left:-4px; width: 21px ;}< br/>. nJ {background-position:-214px 0px; left: 4px ;}< br/>. nQ {background-position:-227px 0px; left: 2px ;}< br/>. nK {background-position:-241px 0px; left: 0px ;}< br/>/* ~ K Digital Image-bottom right corner */<br/>. nA_h {background-position:-75px-22px; right: 2px ;}< br/>. n2_h {background-position:-87px-22px ;}< br/>. n3_h {background-position:-100px-22px ;}< br/>. n4_h {background-position:-113px-22px ;}< br/>. n5_h {background-position:-126px-22px ;}< br/>. n6_h {background-position:-139px-22px ;}< br/>. n7_h {background-position:-152px-22px ;}< br/>. n8_h {background-position:-165px-22px ;}< br/>. n9_h {ba Ckground-position:-178px-22px;} <br/>. n10_h {background-position:-191px-22px; right: 3px; width: 21px ;}< br/>. nJ_h {background-position:-214px-22px; right: 2px ;}< br/>. nQ_h {background-position:-227px-22px; right: 4px ;}< br/>. nK_h {background-position:-241px-22px; right: 6px ;}< br/>/* ~ K Number Image-red in the upper left corner */<br/>. nA_red {background-position:-75px-11px;} <br/>. n2_red {background-position:-87px-11px;} <br/>. n3_red {background-position:-100px-11px;} <br/>. n4_red {background-position:-113px-11px;} <br/>. n5_red {background-position:-126px-11px;} <br/>. n6_red {background-position:-139px 0px;} <br/>. n7_red {background-position:-152px-11px;} <br/>. n8_red {background-position:-165px 0px;} <br/>. bytes _ Red {background-position:-178px-11px;} <br/>. n10_red {background-position:-191px 0px;} <br/>. nJ_red {background-position:-214px-11px;} <br/>. nQ_red {background-position:-227px-11px;} <br/>. nK_red {background-position:-240px-11px;} <br/>/* ~ K Digital Image-red in the lower right corner */<br/>. nA_h_red {background-position:-75px-33px;} <br/>. n2_h_red {background-position:-87px-33px;} <br/>. n3_h_red {background-position:-100px-33px;} <br/>. n4_h_red {background-position:-113px-33px ;}< br/>. n5_h_red {background-position:-126px-33px ;}< br/>. n6_h_red {background-position:-139px-33px ;}< br/>. n7_h_red {background-position:-152px-33px ;}< br/>. n8_h_red {background-position:-165px-33px ;}< br/>. n9_h_red {background-position:-178px-33px ;}< br/>. n10_h_red {background-position:-191px-33px ;}< br/>. nJ_h_red {background-position:-214px-33px ;}< br/>. nQ_h_red {background-position:-227px-33px;} <br/>. nK_h_red {background-position:-241px-33px;} <br/>/* the position of J, Q, and K is somewhat offset */<br/>. j1 {left: 23px; top: 23px; z-index: 1 ;}< br/>. j4 {left: 80px; top: 128px ;}< br/>/* J, Q, K intermediate image */<br/>. BJ {display: block; width: 80px; height: 130px; left: 21px; top: 20px; border: 1px #000 solid; background: url (http:// I .namipan.com/files/d481a654410de999339a83faedae5b2400f42ecf216f0000c16c/0/card.gif) no-repeat 0px-62px;} <br/>. BQ {display: block; width: 80px; height: 130px; left: 21px; top: 20px; border: 1px #000 solid; background: url (http:// I .namipan.com/files/d481a654410de999339a83faedae5b2400f42ecf216f0000c16c/0/card.gif) no-repeat-80px-62px;} <br/>. BK {display: block; width: 80px; height: 130px; left: 21px; top: 20px; border: 1px #000 solid; background: url (http:// I .namipan.com/files/d481a654410de999339a83faedae5b2400f42ecf216f0000c16c/0/card.gif) no-repeat-160px-62px;} <br/>. back {width: 100%; height: 100%; background: url (http:// I .namipan.com/files/0edb9d17c6b9cae950f043bc209e928d9074a1e8ab03000064c5/0/cardback.gif );} <br/> </style> <br/> </pead> <br/> <body> <br/> <bgsound cep = "2"/> <br/> <div class = "card" style = "left: 10px; top: 15px; "> <br/> <div class =" front "> <br/> <strong class =" N1 nA "> </strong> <br/> <em class =" first small_up1 "> </em> <br/> <em class =" Last small_down1 "> </em> <br/> <strong class =" N2 nA_h "> </ strong> <br/> </div> <br/> <bgsound cep = "3"/> <br/> <div class =" card "style =" left: 150px; top: 15px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n2_red "> </strong> <br/> <em class =" first small_up2 "> </em> <br/> <em class =" Last small_down2 "> </em> <br/> <strong class =" N2 n2_h_red "> </ strong> <br/> </div> <br/> <bgsound cep = "4"/> <br/> <div class =" card "style =" left: 290px; top: 15px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n3 "> </strong> <br/> <em class =" first small_up3 "> </em> <br/> <em class =" Last small_down3 "> </em> <br/> <strong class =" N2 n3_h "> </ strong> <br/> </div> <br/> <bgsound cep = "5"/> <br/> <div class =" card "style =" left: pixel PX; top: 15px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n4_red "> </strong> <br/> <em class =" first small_up4 "> </em> <br/> <em class =" Last small_down4 "> </em> <br/> <strong class =" N2 n4_h_red "> </ strong> <br/> </div> <br/> <bgsound cep = "6"/> <br/> <div class =" card "style =" left: 570px; top: 15px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n5 "> </strong> <br/> <em class =" first small_up1 "> </em> <br/> <em class =" Last small_down1 "> </em> <br/> <strong class =" N2 n5_h "> </ strong> <br/> </div> <br/> <bgsound cep = "7"/> <br/> <div class =" card "style =" left: 10px; top: 195px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n6 "> </strong> <br/> <em class =" first small_up1 "> </em> <br/> <em class =" Last small_down1 "> </em> <br/> <strong class =" N2 n6_h "> </ strong> <br/> </div> <br/> <bgsound cep = "8"/> <br/> <div class =" card "style =" left: 150px; top: 195px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n7_red "> </strong> <br/> <em class =" first small_up2 "> </em> <br/> <em class =" Last small_down2 "> </em> <br/> <strong class =" N2 n7_h_red "> </ strong> <br/> </div> <br/> <bgsound cep = "9"/> <br/> <div class =" card "style =" left: 290px; top: 195px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n8 "> </strong> <br/> <em class =" first small_up3 "> </em> <br/> <em class =" Last small_down1 "> </em> <br/> <strong class =" N2 n8_h "> </ strong> <br/> </div> <br/> <bgsound cep = "10"/> <br/> <div class =" card "style =" left: pixel PX; top: 195px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n9_red "> </strong> <br/> <em class =" first small_up4 "> </em> <br/> <em class =" Last small_down4 "> </em> <br/> <strong class =" N2 n9_h_red "> </ strong> <br/> </div> <br/> <bgsound cep = "11"/> <br/> <div class =" card "style =" left: 570px; top: 195px; "> <br/> <div class =" front "> <br/> <strong class =" N1 n10 "> </strong> <br/> <em class =" first small_up1 "> </em> <br/> <em class =" Last small_down1 "> </em> <br/> <strong class =" N2 n10_h "> </ strong> <br/> </div> <br/> <bgsound cep = "12"/> <br/> <div class =" card "style =" left: 10px; top: 375px; "> <br/> <div class =" front "> <br/> <strong class =" N1 nJ "> </strong> <br/> <em class =" first small_up1 "> </em> <br/> <em class =" Last small_down1 "> </em> <br/> <strong class =" N2 nJ_h "> </ strong> <br/> </div> <br/> <bgsound cep = "13"/> <br/> <div class =" card "style =" left: 150px; top: 375px; "> <br/> <div class =" front "> <br/> <strong class =" N1 nQ_red "> </strong> <br/> <em class =" first small_up2 "> </em> <br/> <strong class =" N2 nQ_h_red "> </strong> <br/> </div> <br/> <bgsound cep = "14"/> <br/> <div class = "card" style = "left: 290px; top: 375px; "> <br/> <div class =" front "> <br/> <strong class =" N1 nK "> </strong> <br/> <em class =" first small_up3 "> </em> <br/> <em class =" Last small_down3 "> </em> <br/> <strong class =" nkn2 _h "> </ strong> <br/> </div> <br/> <bgsound cep = "15"/> <br/> <div class =" card "style =" left: pixel PX; top: 375px; "> <br/> <div class =" front "> <br/> <strong class =" N1 nK nK_red "> </strong> <br/> <em class = "First small_up4"> </em> <br/> <em class = "Last small_down4"> </em> <br/> <strong class = "nkn2 _h nK_h_red"> </strong> <br/> </div> <br/> <bgsound cep = "16"/> <br/> <div class = "card" style = "left: 570px; top: 375px; "> <br/> <div class =" back "> <br/> </div> <br/> </body> <br /> </ptml> <br/>