製作一幅撲克牌系列一—css sprites圖片背景最佳化技術

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

製作一幅撲克牌系列一---css sprites圖片背景最佳化技術

本站原創：biny 轉載請註明出處

在google中搜尋一下css sprites這個名稱，會查出很多資訊，並且隨著SEO越來越被人們重視，採用這種技術來進行圖片最佳化的網站越來越多，國內幾家大型門戶網站無不仿效。如新浪，網易，搜狐。你下載一下他們的網站上的圖片，你會看到他們將很多小圖片全部整合在一張圖片上。

這樣做的好處是不言而語：

1. 加速圖片顯示

2. 利用CSS技巧減小HTTP請求

3. 利於網站最佳化seo

其實原理非常簡單，主要是應用css中的背景定位技術來實現的。主要就是用一個屬性background-position來控制顯示一張大圖片中的一個指定大小的圖片位置。

下面從一個比較有趣的例子來一步步動手製作一幅撲克牌，看看是如何定位元影像片的。

首先我們分析一下撲克牌，一幅撲克牌有兩種顏色，有四種圖案黑桃、紅心、梅花、方塊。另外有J，Q，K，這三種是花牌。A~10中只用到四種圖案，而三種花牌用到三張圖片，而它們的位置是不同的，但歸納起來就只有幾種變化，如A—7這是一種變化，它是三行三列的布局（A和2是它的特例），8—10就一種，它是四行三列。J，Q，K是一種（其實它也是第一種的變種特例）。
知道了原理就好辦了，我們先做出它們的圖片來，一張一張來，黑桃、紅心、梅花、方塊大圖各一張，小圖各一張，J，Q，K圖案各一張，背景圖一張。

另外要做全部的數字圖片13張，270度翻轉的圖片13張。

好了，所有的圖片準備齊了，共有71張圖片，嘿嘿，有點嚇人，這麼多圖片，沒想到吧（以後會介紹一個比較省事的做法，不用圖片，先賣個關子，有點）

我們以黑桃10為例看看其中的座標點，是在PS中用輔助線做好的效果：

圖一

要注意的是每一張牌下部分的內容與上部分是垂直翻轉的，這也是為什麼將數字也做成圖片的原因。

所以我們可以將所有的圖片在PS中排列組合在一起，二所示：

圖二

在組合這張圖片要注意的是，每一張圖都是完整的，不能被其它圖片重疊，並且要精確計算好每個圖片的座標位置，比如它的左上方頂點座標，和右下角頂點座標，知道這兩個座標點後，每一張小圖片的位置就能全部計算出來了。

圖片準備好了後，我們開始設計結構吧，因為黑桃10是所有撲克牌中用到圖片最多的，我們就以它為例。

HTML結構：

</div>

CSS樣式：

我先定義一張撲克牌的總容器的樣式：

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

我給它設定固定的寬高值，並加上一個邊框線，設定其絕對位置是為以後定位時打下伏筆。因為我可能會做不只一張撲克牌。以後在擴充時只需要給它加上left和top屬性就可將它定位到不同的地方。並且將它設定絕對位置後，其子容器又可以針對它來定位。

我用span,b,em三種標籤分別代表三種不同類型的圖片，span用來表標中間的圖片，b用來表示數定，em用來表示數字下面的小表徵圖。

上面的每個span代表一個座標點，將通用的部分寫成一個樣式，便於其它結構的調用，然後將它組合應用到一個座標點上，如。其樣式如下定義：

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

上面這個樣式是定義中間的10個黑桃圖片容器的通用設定。將它們設定為塊狀，並固定大小，設定其絕對位置，讓它能定義到你想指定的位置上。

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

這個樣式就是定位器，位移到指定的座標點上，其它的9個原理相似。

.up1{background-position:0 1px;}/*黑桃*/

.down1{background-position:0 -19px;}/*垂直翻轉的黑桃*/

這兩個樣式就是載入圖片，因為每張片的在原圖上的座標位置是不同的，所以你要根據前面的圖片的位置找出每一個小圖片的精確位置。

現在，你已經構建了html結構，並給結構設定了樣式，將所有內容拼裝起來，我們的黑桃10就算完成了，簡單吧！
下面是全部源碼：

好了，一張撲克牌完成，其它的撲克牌觸類旁通。

我們還要加一張圖片來實現撲克牌翻過來的效果。這張圖片因為要進行平鋪，所以不加在上面的圖片集合。三所示：

圖三

最後，將所有內容綜合起來，一幅完整的撲克牌就算完成了！

<!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>製作一幅撲克牌</title> <style type="text/css"> .card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中間圖片通用設定*/ 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;} /*小圖片通用設定*/ 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/images/p_blog_csdn_net/by20081213/EntryImages/20090131/card633690169149702500.gif) no-repeat; overflow:hidden;} /*數字通用設定*/ 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;} /*各座標點位置*/ .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:131px;} .AM{left:20px;top:75px;} .AM1{left:54px;top:20px;} .B1{left:54px;top:38px;} .B2{left:54px;top:117px;} .BM{left:54px;top:75px;} .C1{left:86px;top:20px;} .C2{left:86px;top:57px;} .C3{left:86px;top:94px;} .C4{left:86px;top:131px;} .CM{left:86px;top:75px;} .CM1{left:54px;top:131px;} .Last{bottom:21px;right:0px;} .N2{bottom:8px;right:4px; } /*大表徵圖黑紅梅方四種圖片-上方向*/ .up1{background-position:0 1px;}/*黑桃*/ .up2{background-position:-19px 1px;}/*紅桃*/ .up3{background-position:-39px 1px;}/*梅花*/ .up4{background-position:-58px 1px;width:19px;}/*方塊* /*大表徵圖黑紅梅方四種圖片-下方向*/ .down1{background-position:0 -19px;}/*黑桃*/ .down2{background-position:-19px -19px;}/*紅桃*/ .down3{background-position:-38px -19px;}/*梅花*/ .down4{background-position:-58px -19px;width:19px;}/*方塊*/ /*小表徵圖黑紅梅方四種圖片-上方向*/ .small_up1{background-position:0 -40px;}/*黑桃*/ .small_up2{background-position:-19px -40px;}/*紅桃*/ .small_up3{background-position:-57px -40px;}/*梅花*/ .small_up4{background-position:-38px -40px;}/*方塊*/ /*小表徵圖黑紅梅方四種圖片-下方向*/ .small_down1{background-position:0 -51px;}/*黑桃*/ .small_down2{background-position:-19px -51px;}/*紅桃*/ .small_down3{background-position:-57px -51px;}/*梅花*/ .small_down4{background-position:-38px -51px;}/*方塊*/ /*A~k數字圖片-左上方*/ .nA{background-position:-75px 0px;left:4px;} .n2{background-position:-87px 0px;} .n3{background-position:-100px 0px;} .n4{background-position:-113px 0px;} .n5{background-position:-126px 0px;} .n6{background-position:-139px 0px;} .n7{background-position:-152px 0px;} .n8{background-position:-165px 0px;} .n9{background-position:-178px 0px;} .n10{background-position:-191px 0px;left:-4px;width:21px;} .nJ{background-position:-214px 0px;left:4px;} .nQ{background-position:-227px 0px;left:2px;} .nK{background-position:-241px 0px;left:0px;} /*A~k數字圖片-右下角*/ .nA_h{background-position:-75px -22px;right:2px;} .n2_h{background-position:-87px -22px;} .n3_h{background-position:-100px -22px;} .n4_h{background-position:-113px -22px;} .n5_h{background-position:-126px -22px;} .n6_h{background-position:-139px -22px;} .n7_h{background-position:-152px -22px;} .n8_h{background-position:-165px -22px;} .n9_h{background-position:-178px -22px;} .n10_h{background-position:-191px -22px;right:3px;width:21px;} .nJ_h{background-position:-214px -22px;right:2px;} .nQ_h{background-position:-227px -22px;right:4px;} .nK_h{background-position:-241px -22px;right:6px;} /*A~k數字圖片-左上方紅色字*/ .nA_red{background-position:-75px -11px;} .n2_red{background-position:-87px -11px;} .n3_red{background-position:-100px -11px;} .n4_red{background-position:-113px -11px;} .n5_red{background-position:-126px -11px;} .n6_red{background-position:-139px 0px;} .n7_red{background-position:-152px -11px;} .n8_red{background-position:-165px 0px;} .n9_red{background-position:-178px -11px;} .n10_red{background-position:-191px 0px;} .nJ_red{background-position:-214px -11px;} .nQ_red{background-position:-227px -11px;} .nK_red{background-position:-240px -11px;} /*A~k數字圖片-右下角紅色字*/ .nA_h_red{background-position:-75px -33px;} .n2_h_red{background-position:-87px -33px;} .n3_h_red{background-position:-100px -33px;} .n4_h_red{background-position:-113px -33px;} .n5_h_red{background-position:-126px -33px;} .n6_h_red{background-position:-139px -33px;} .n7_h_red{background-position:-152px -33px;} .n8_h_red{background-position:-165px -33px;} .n9_h_red{background-position:-178px -33px;} .n10_h_red{background-position:-191px -33px;} .nJ_h_red{background-position:-214px -33px;} .nQ_h_red{background-position:-227px -33px;} .nK_h_red{background-position:-241px -33px;} /*J,Q,K的位置有點位移*/ .J1{left:23px;top:23px;z-index:1;} .J4{left:80px;top:128px;} /*J,Q,K的中間圖片*/ .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;} .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;} .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;} .back{width:100%;height:100%;background:url(http://i.namipan.com/files/0edb9d17c6b9cae950f043bc209e928d9074a1e8ab03000064c5/0/cardback.gif);} </style> </head> <body> <BGSOUND CEP="2" /> <div class="card" style="left:10px;top:15px;"> <div class="front"> </div> </div> <BGSOUND CEP="3" /> <div class="card" style="left:150px;top:15px;"> <div class="front"> </div> </div> <BGSOUND CEP="4" /> <div class="card" style="left:290px;top:15px;"> <div class="front"> </div> </div> <BGSOUND CEP="5" /> <div class="card" style="left:430px;top:15px;"> <div class="front"> </div> </div> <BGSOUND CEP="6" /> <div class="card" style="left:570px;top:15px;"> <div class="front"> </div> </div> <BGSOUND CEP="7" /> <div class="card" style="left:10px;top:195px;"> <div class="front"> </div> </div> <BGSOUND CEP="8" /> <div class="card" style="left:150px;top:195px;"> <div class="front"> </div> </div> <BGSOUND CEP="9" /> <div class="card" style="left:290px;top:195px;"> <div class="front"> </div> </div> <BGSOUND CEP="10" /> <div class="card" style="left:430px;top:195px;"> <div class="front"> </div> </div> <BGSOUND CEP="11" /> <div class="card" style="left:570px;top:195px;"> <div class="front"> </div> </div> <BGSOUND CEP="12" /> <div class="card" style="left:10px;top:375px;"> <div class="front"> </div> </div> <BGSOUND CEP="13" /> <div class="card" style="left:150px;top:375px;"> <div class="front"> </div> </div> <BGSOUND CEP="14" /> <div class="card" style="left:290px;top:375px;"> <div class="front"> </div> </div> <BGSOUND CEP="15" /> <div class="card" style="left:430px;top:375px;"> <div class="front"> </div> </div> <BGSOUND CEP="16" /> <div class="card" style="left:570px;top:375px;"> <div class="back"> </div> </div> </body> </html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More