,class,span,/span>,div,/div>" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css sprites把很多小圖集成在一張圖片上

互聯(lián)網(wǎng)   發(fā)布時(shí)間：2009-04-02 19:36:39   作者：佚名   我要評(píng)論
網(wǎng)頁制作Webjx文章簡(jiǎn)介：在google中搜索一下css sprites這個(gè)名稱，會(huì)查出很多信息，并且隨著SEO越來越被人們重視，采用這種技術(shù)來進(jìn)行圖片優(yōu)化的網(wǎng)站越來越多，國(guó)內(nèi)幾家大型門戶網(wǎng)站無不仿效。如新浪，網(wǎng)易，搜狐。你下載一下他們的網(wǎng)站上的圖


在google中搜索一下css sprites這個(gè)名稱，會(huì)查出很多信息，并且隨著SEO越來越被人們重視，采用這種技術(shù)來進(jìn)行圖片優(yōu)化的網(wǎng)站越來越多，國(guó)內(nèi)幾家大型門戶網(wǎng)站無不仿效。如新浪，網(wǎng)易，搜狐。你下載一下他們的網(wǎng)站上的圖片，你會(huì)看到他們將很多小圖片全部集成在一張圖片上
在google中搜索一下css sprites這個(gè)名稱，會(huì)查出很多信息，并且隨著SEO越來越被人們重視，采用這種技術(shù)來進(jìn)行圖片優(yōu)化的網(wǎng)站越來越多，國(guó)內(nèi)幾家大型門戶網(wǎng)站無不仿效。如新浪，網(wǎng)易，搜狐。你下載一下他們的網(wǎng)站上的圖片，你會(huì)看到他們將很多小圖片全部集成在一張圖片上。
這樣做的好處是不言而語：

  1. 加速圖片顯示 利用CSS技巧減小HTTP請(qǐng)求 利于網(wǎng)站優(yōu)化seo


其實(shí)原理非常簡(jiǎn)單，主要是應(yīng)用css中的背景定位技術(shù)來實(shí)現(xiàn)的。主要就是用一個(gè)屬性background-position來控制顯示一張大圖片中的一個(gè)指定大小的圖片位置。
css sprites圖片背景優(yōu)化技術(shù)
下面從一個(gè)比較有趣的例子來一步步動(dòng)手制作一幅撲克牌，看看是如何定位圖片的。
首先我們分析一下?lián)淇伺?，一幅撲克牌有兩種顏色，有四種圖案黑桃、紅心、梅花、方塊。另外有J，Q，K，這三種是花牌。A~10中只用到四種圖案，而三種花牌用到三張圖片，而它們的位置是不同的，但歸納起來就只有幾種變化，如A—7這是一種變化，它是三行三列的布局（A和2是它的特例），8—10就一種，它是四行三列。J，Q，K是一種（其實(shí)它也是第一種的變種特例）。
知道了原理就好辦了，我們先做出它們的圖片來，一張一張來，黑桃、紅心、梅花、方塊大圖各一張，小圖各一張，J，Q，K圖案各一張，背景圖一張。
另外要做全部的數(shù)字圖片13張，270度翻轉(zhuǎn)的圖片13張。
好了，所有的圖片準(zhǔn)備齊了，共有71張圖片，嘿嘿，有點(diǎn)嚇人，這么多圖片，沒想到吧（以后會(huì)介紹一個(gè)比較省事的做法，不用圖片，先賣個(gè)關(guān)子，有點(diǎn)）
我們以黑桃10為例看看其中的坐標(biāo)點(diǎn)，下圖是在PS中用輔助線做好的效果：

圖一
要注意的是每一張牌下部分的內(nèi)容與上部分是垂直翻轉(zhuǎn)的，這也是為什么將數(shù)字也做成圖片的原因。
所以我們可以將所有的圖片在PS中排列組合在一起，如圖二所示：

圖二
在組合這張圖片要注意的是，每一張圖都是完整的，不能被其它圖片重疊，并且要精確計(jì)算好每個(gè)圖片的坐標(biāo)位置，比如它的左上角頂點(diǎn)坐標(biāo)，和右下角頂點(diǎn)坐標(biāo)，知道這兩個(gè)坐標(biāo)點(diǎn)后，每一張小圖片的位置就能全部計(jì)算出來了。
圖片準(zhǔn)備好了后，我們開始設(shè)計(jì)結(jié)構(gòu)吧，因?yàn)楹谔?0是所有撲克牌中用到圖片最多的，我們就以它為例。
HTML結(jié)構(gòu)：

CSS樣式：
我先定義一張撲克牌的總?cè)萜鞯臉邮剑?br />.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
我給它設(shè)置固定的寬高值，并加上一個(gè)邊框線，設(shè)置其絕對(duì)定位是為以后定位時(shí)打下伏筆。因?yàn)槲铱赡軙?huì)做不只一張撲克牌。以后在擴(kuò)展時(shí)只需要給它加上left和top屬性就可將它定位到不同的地方。并且將它設(shè)置絕對(duì)定位后，其子容器又可以針對(duì)它來定位。
我用span,b,em三種標(biāo)簽分別代表三種不同類型的圖片，span用來表標(biāo)中間的圖片，b用來表示數(shù)定，em用來表示數(shù)字下面的小圖標(biāo)。
上面的每個(gè)span代表一個(gè)坐標(biāo)點(diǎn)，將通用的部分寫成一個(gè)樣式，便于其它結(jié)構(gòu)的調(diào)用，然后將它組合應(yīng)用到一個(gè)坐標(biāo)點(diǎn)上，如<span class="A1 up1"></span>。其樣式如下定義：
span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}
上面這個(gè)樣式是定義中間的10個(gè)黑桃圖片容器的通用設(shè)置。將它們?cè)O(shè)置為塊狀，并固定大小，設(shè)置其絕對(duì)定位，讓它能定義到你想指定的位置上。
.A1{left:20px;top:20px;}
這個(gè)樣式就是定位，偏移到指定的坐標(biāo)點(diǎn)上，其它的9個(gè)原理相似。
.up1{background-position:0 1px;}/*黑桃*/
.down1{background-position:0 -19px;}/*垂直翻轉(zhuǎn)的黑桃*/
這兩個(gè)樣式就是載入圖片，因?yàn)槊繌埰脑谠瓐D上的坐標(biāo)位置是不同的，所以你要根據(jù)前面的圖片的位置找出每一個(gè)小圖片的精確位置。
現(xiàn)在，你已經(jīng)構(gòu)建了html結(jié)構(gòu)，并給結(jié)構(gòu)設(shè)置了樣式，將所有內(nèi)容拼裝起來，我們的黑桃10就算完成了，簡(jiǎn)單吧！
運(yùn)行代碼框
<!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>制作一幅撲克牌--黑桃10</title> <style type="text/css"><!-- .card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中間圖片通用設(shè)置*/ span{display:block;width:20px;height:21px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;} /*小圖片通用設(shè)置*/ 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;} /*數(shù)字通用設(shè)置*/ 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;} /*各坐標(biāo)點(diǎn)位置*/ .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;} .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:131px;} .Last{bottom:20px;right:0px;} .N2{bottom:8px;right:5px; } /*大圖標(biāo)黑紅梅方四種圖片-上方向*/ .up1{background-position:0 1px;}/*黑桃*/ /*大圖標(biāo)黑紅梅方四種圖片-下方向*/ .down1{background-position:0 -19px;}/*黑桃*/ /*小圖標(biāo)黑紅梅方四種圖片-上方向*/ .small_up1{background-position:0 -40px;}/*黑桃*/ /*小圖標(biāo)黑紅梅方四種圖片-下方向*/ .small_down1{background-position:0 -51px;}/*黑桃*/ /*A~k數(shù)字圖片-左上角*/ .n10{background-position:-191px 0px;left:-4px;width:21px;} /*A~k數(shù)字圖片-右下角*/ .n10_h{background-position:-191px -22px;right:3px;width:21px;} /*A~k數(shù)字圖片-左上角紅色字*/ .n10_red{background-position:-191px 0px;} /*A~k數(shù)字圖片-右下角紅色字*/ .n10_h_red{background-position:-191px -33px;} --> </style> </head> <body> <!--10字符--> <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> </body> </html>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
好了，一張撲克牌完成，其它的撲克牌觸類旁通。
我們還要加一張圖片來實(shí)現(xiàn)撲克牌翻過來的效果。這張圖片因?yàn)橐M(jìn)行平鋪，所以不加在上面的圖片集合。如圖三所示：

圖三
最后，將所有內(nèi)容綜合起來，一幅完整的撲克牌就算完成了！
運(yùn)行代碼框
<!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;} /*中間圖片通用設(shè)置*/ span{display:block;width:20px;height:21px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;} /*小圖片通用設(shè)置*/ 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;} /*數(shù)字通用設(shè)置*/ 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;} /*各坐標(biāo)點(diǎn)位置*/ .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; } /*大圖標(biāo)黑紅梅方四種圖片-上方向*/ .up1{background-position:0 1px;}/*黑桃*/ .up2{background-position:-19px 1px;}/*紅桃*/ .up3{background-position:-39px 1px;}/*梅花*/ .up4{background-position:-58px 1px;width:19px;}/*方塊* /*大圖標(biāo)黑紅梅方四種圖片-下方向*/ .down1{background-position:0 -19px;}/*黑桃*/ .down2{background-position:-19px -19px;}/*紅桃*/ .down3{background-position:-38px -19px;}/*梅花*/ .down4{background-position:-58px -19px;width:19px;}/*方塊*/ /*小圖標(biāo)黑紅梅方四種圖片-上方向*/ .small_up1{background-position:0 -40px;}/*黑桃*/ .small_up2{background-position:-19px -40px;}/*紅桃*/ .small_up3{background-position:-57px -40px;}/*梅花*/ .small_up4{background-position:-38px -40px;}/*方塊*/ /*小圖標(biāo)黑紅梅方四種圖片-下方向*/ .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數(shù)字圖片-左上角*/ .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數(shù)字圖片-右下角*/ .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數(shù)字圖片-左上角紅色字*/ .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數(shù)字圖片-右下角紅色字*/ .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的位置有點(diǎn)偏移*/ .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://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat 0px -62px;} .BQ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat -80px -62px;} .BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat -160px -62px;} .back{width:100%;height:100%;background:url(http://www.blueidea.com/articleimg/2009/02/6382/cardback.gif);} </style> </head> <body> <!--A字符--> <div class="card" style="left:10px;top:15px;"> <div class="front"> <b class="N1 nA"></b> <em class="First small_up1"></em> <span class="BM up1"></span> <em class="Last small_down1"></em> <b class="N2 nA_h"></b> </div> </div> <!--2字符--> <div class="card" style="left:150px;top:15px;"> <div class="front"> <b class="N1 n2_red"></b> <em class="First small_up2"></em> <span class="AM1 up2"></span> <span class="CM1 down2"></span> <em class="Last small_down2"></em> <b class="N2 n2_h_red"></b> </div> </div> <!--3字符--> <div class="card" style="left:290px;top:15px;"> <div class="front"> <b class="N1 n3"></b> <em class="First small_up3"></em> <span class="AM1 up3"></span> <span class="BM up3"></span> <span class="CM1 down3"></span> <em class="Last small_down3"></em> <b class="N2 n3_h"></b> </div> </div> <!--4字符--> <div class="card" style="left:430px;top:15px;"> <div class="front"> <b class="N1 n4_red"></b> <em class="First small_up4"></em> <span class="A1 up4"></span> <span class="A4 down4"></span> <span class="C1 up4"></span> <span class="C4 down4"></span> <em class="Last small_down4"></em> <b class="N2 n4_h_red"></b> </div> </div> <!--5字符--> <div class="card" style="left:570px;top:15px;"> <div class="front"> <b class="N1 n5"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="A4 down1"></span> <span class="BM up1"></span> <span class="C1 up1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n5_h"></b> </div> </div> <!--6字符--> <div class="card" style="left:10px;top:195px;"> <div class="front"> <b class="N1 n6"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="AM up1"></span> <span class="A4 down1"></span> <span class="C1 up1"></span> <span class="CM up1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n6_h"></b> </div> </div> <!--7字符--> <div class="card" style="left:150px;top:195px;"> <div class="front"> <b class="N1 n7_red"></b> <em class="First small_up2"></em> <span class="A1 up2"></span> <span class="AM up2"></span> <span class="A4 down2"></span> <span class="BM up2"></span> <span class="C1 up2"></span> <span class="CM up2"></span> <span class="C4 down2"></span> <em class="Last small_down2"></em> <b class="N2 n7_h_red"></b> </div> </div> <!--8字符--> <div class="card" style="left:290px;top:195px;"> <div class="front"> <b class="N1 n8"></b> <em class="First small_up3"></em> <span class="A1 up3"></span> <span class="A2 up3"></span> <span class="A3 down3"></span> <span class="A4 down3"></span> <span class="C1 up3"></span> <span class="C2 up3"></span> <span class="C3 down3"></span> <span class="C4 down3"></span> <em class="Last small_down1"></em> <b class="N2 n8_h"></b> </div> </div> <!--9字符--> <div class="card" style="left:430px;top:195px;"> <div class="front"> <b class="N1 n9_red"></b> <em class="First small_up4"></em> <span class="A1 up4"></span> <span class="A2 up4"></span> <span class="A3 down4"></span> <span class="A4 down4"></span> <span class="BM up4"></span> <span class="C1 up4"></span> <span class="C2 up4"></span> <span class="C3 down4"></span> <span class="C4 down4"></span> <em class="Last small_down4"></em> <b class="N2 n9_h_red"></b> </div> </div> <!--10字符--> <div class="card" style="left:570px;top:195px;"> <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> <!--J字符--> <div class="card" style="left:10px;top:375px;"> <div class="front"> <b class="N1 nJ"></b> <em class="First small_up1"></em> <span class="J1 up1"></span> <span class="BJ"></span> <span class="J4 down1"></span> <em class="Last small_down1"></em> <b class="N2 nJ_h"></b> </div> </div> <!--Q字符--> <div class="card" style="left:150px;top:375px;"> <div class="front"> <b class="N1 nQ_red"></b> <em class="First small_up2"></em> <span class="J1 up2"></span> <span class="BQ"></span> <span class="J4 down2"></span> <span class="Last small_down2"></span> <b class="N2 nQ_h_red"></b> </div> </div> <!--K字符--> <div class="card" style="left:290px;top:375px;"> <div class="front"> <b class="N1 nK"></b> <em class="First small_up3"></em> <span class="J1 up3"></span> <span class="BK"></span> <span class="J4 down3"></span> <em class="Last small_down3"></em> <b class="N2 nK_h"></b> </div> </div> <!--K字符--> <div class="card" style="left:430px;top:375px;"> <div class="front"> <b class="N1 nK nK_red"></b> <em class="First small_up4"></em> <span class="J1 up4"></span> <span class="BK"></span> <span class="J4 down4"></span> <em class="Last small_down4"></em> <b class="N2 nK_h nK_h_red"></b> </div> </div> <!--背面圖案--> <div class="card" style="left:570px;top:375px;"> <div class="back"> </div> </div> </body> </html>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
#p#
在google中搜索一下css sprites這個(gè)名稱，會(huì)查出很多信息，并且隨著SEO越來越被人們重視，采用這種技術(shù)來進(jìn)行圖片優(yōu)化的網(wǎng)站越來越多，國(guó)內(nèi)幾家大型門戶網(wǎng)站無不仿效。如新浪，網(wǎng)易，搜狐。你下載一下他們的網(wǎng)站上的圖片，你會(huì)看到他們將很多小圖片全部集成在一張圖片上
不用圖片的純css實(shí)現(xiàn)方法
前面介紹了制作的撲克牌是用圖片的方式來實(shí)現(xiàn)，它逼真地還原了撲克牌。下面介紹一種比較簡(jiǎn)單的實(shí)現(xiàn)方法，這種方法不用一張圖片。
原理是：用四個(gè)特別字符的html標(biāo)簽來實(shí)現(xiàn)。

  1. &spades;表示黑桃 &hearts;表示紅心 &clubs;表示梅花 &diams;表示方塊


先寫結(jié)構(gòu)：
<div class="card" style="left:10px;top:20px;">
<div class="front">
<b class="index">9<br />&spades;</b>
<span class="A1">&spades;</span>
<span class="A2">&spades;</span>
<span class="A3">&spades;</span>
<span class="A4">&spades;</span>
<span class="B1">&spades;</span>
<span class="C1">&spades;</span>
<span class="C2">&spades;</span>
<span class="C3">&spades;</span>
<span class="C4">&spades;</span>
<b class="end">&spades;<br/>9</b>
</div>
</div>
再寫樣式：

注意：為了真實(shí)的還原一張撲克牌，我在第二張撲克牌中加入濾鏡功能，讓下面的圖案垂直翻轉(zhuǎn)，但這種方法會(huì)造成圖片不清晰，并且這種方法只有IE系列的瀏覽器才能識(shí)別，如果高手們有其它更好的辦法，請(qǐng)不吝賜教！
運(yùn)行代碼框
<!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>無標(biāo)題文檔</title> <mce:style type="text/css"><!-- .card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中間圖片通用設(shè)置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小圖片通用設(shè)置*/ /*數(shù)字通用設(shè)置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐標(biāo)點(diǎn)位置*/ .A1{left:21px;top:10px;} .A2{left:21px;top:50px;} .A3{left:21px;top:90px;} .A4{left:21px;top:130px;} .B1{left:51px;top:76px;} .C1{left:83px;top:10px;} .C2{left:83px;top:50px;} .C3{left:83px;top:90px;} .C4{left:83px;top:130px;} .scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px} .index { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; left:5px; top:0px; } .end { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; right:5px; bottom:0px; } .red { color: #ff0000; } .font{font-size:34px;} --></mce:style><style type="text/css" mce_bogus="1">.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中間圖片通用設(shè)置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小圖片通用設(shè)置*/ /*數(shù)字通用設(shè)置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐標(biāo)點(diǎn)位置*/ .A1{left:21px;top:10px;} .A2{left:21px;top:50px;} .A3{left:21px;top:90px;} .A4{left:21px;top:130px;} .B1{left:51px;top:76px;} .C1{left:83px;top:10px;} .C2{left:83px;top:50px;} .C3{left:83px;top:90px;} .C4{left:83px;top:130px;} .scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px} .index { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; left:5px; top:0px; } .end { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; right:5px; bottom:0px; } .red { color: #ff0000; } .font{font-size:34px;}</style> </head> <body> <!--9字符--> <div class="card" style="left:10px;top:20px;"> <div class="front"> <b class="index">9<br />♠</b> <span class="A1">♠</span> <span class="A2">♠</span> <span class="A3">♠</span> <span class="A4">♠</span> <span class="B1">♠</span> <span class="C1">♠</span> <span class="C2">♠</span> <span class="C3">♠</span> <span class="C4">♠</span> <b class="end">♠<br/>9</b> </div> </div> <!--9字符--> <div class="card" style="left:175px;top:20px;"> <div class="front red"> <b class="index">9<br />♥</b> <span class="A1">♥</span> <span class="A2">♥</span> <span class="A3">♥</span> <span class="A4">♥</span> <span class="B1">♥</span> <span class="C1">♥</span> <span class="C2">♥</span> <span class="C3">♥</span> <span class="C4">♥</span> <b class="end">♥<br/>9</b> </div> </div> <!--9字符--> <div class="card" style="left:340px;top:20px;"> <div class="front red"> <b class="index">9<br />♣</b> <span class="A1">♣</span> <span class="A2">♣</span> <span class="A3 scroll">♣</span> <span class="A4 scroll">♣</span> <span class="B1">♣</span> <span class="C1">♣</span> <span class="C2">♣</span> <span class="C3 scroll">♣</span> <span class="C4 scroll">♣</span> <b class="end scroll">9<br/>♣</b> </div> </div> <!--9字符--> <div class="card" style="left:510px;top:20px;"> <div class="front red"> <b class="index">9<br />♦</b> <span class="A1 font">♦</span> <span class="A2 font">♦</span> <span class="A3 font">♦</span> <span class="A4 font">♦</span> <span class="B1 font">♦</span> <span class="C1 font">♦</span> <span class="C2 font">♦</span> <span class="C3 font">♦</span> <span class="C4 font">♦</span> <b class="end">♦<br/>9</b> </div> </div> </body> </html>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
#p#
在google中搜索一下css sprites這個(gè)名稱，會(huì)查出很多信息，并且隨著SEO越來越被人們重視，采用這種技術(shù)來進(jìn)行圖片優(yōu)化的網(wǎng)站越來越多，國(guó)內(nèi)幾家大型門戶網(wǎng)站無不仿效。如新浪，網(wǎng)易，搜狐。你下載一下他們的網(wǎng)站上的圖片，你會(huì)看到他們將很多小圖片全部集成在一張圖片上
動(dòng)起來
加入了撲克牌拖動(dòng)js功能，更像空當(dāng)接龍小游戲了。順便感謝一下草履蟲，這段代碼是從他哪兒抄來的，哈哈！
運(yùn)行代碼框
<!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;} /*中間圖片通用設(shè)置*/ span{display:block;width:20px;height:21px; position:absolute;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif) no-repeat;} /*小圖片通用設(shè)置*/ 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;} /*數(shù)字通用設(shè)置*/ 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;} /*各坐標(biāo)點(diǎn)位置*/ .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; } /*大圖標(biāo)黑紅梅方四種圖片-上方向*/ .up1{background-position:0 1px;}/*黑桃*/ .up2{background-position:-19px 1px;}/*紅桃*/ .up3{background-position:-39px 1px;}/*梅花*/ .up4{background-position:-58px 1px;width:19px;}/*方塊* /*大圖標(biāo)黑紅梅方四種圖片-下方向*/ .down1{background-position:0 -19px;}/*黑桃*/ .down2{background-position:-19px -19px;}/*紅桃*/ .down3{background-position:-38px -19px;}/*梅花*/ .down4{background-position:-58px -19px;width:19px;}/*方塊*/ /*小圖標(biāo)黑紅梅方四種圖片-上方向*/ .small_up1{background-position:0 -40px;}/*黑桃*/ .small_up2{background-position:-19px -40px;}/*紅桃*/ .small_up3{background-position:-57px -40px;}/*梅花*/ .small_up4{background-position:-38px -40px;}/*方塊*/ /*小圖標(biāo)黑紅梅方四種圖片-下方向*/ .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數(shù)字圖片-左上角*/ .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數(shù)字圖片-右下角*/ .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數(shù)字圖片-左上角紅色字*/ .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數(shù)字圖片-右下角紅色字*/ .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的位置有點(diǎn)偏移*/ .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://www.blueidea.com/articleimg/2009/02/6382/00.gif) no-repeat 0px -62px;} .BQ{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif) no-repeat -80px -62px;} .BK{display:block;width:80px;height:130px;left:21px;top:20px;border:1px #000 solid;background:url(http://www.blueidea.com/articleimg/2009/02/6382/00.gif) no-repeat -160px -62px;} .back{width:100%;height:100%;background:url(http://www.blueidea.com/articleimg/2009/02/6382/cardback.gif);} #idDrag1{left:10px;top:15px;} #idDrag2{left:150px;top:15px;} #idDrag3{left:290px;top:15px;} #idDrag4{left:430px;top:15px;} #idDrag5{left:570px;top:15px;} #idDrag6{left:10px;top:45px;} #idDrag7{left:150px;top:45px;} #idDrag8{left:290px;top:45px;} #idDrag9{left:430px;top:45px;} #idDrag10{left:570px;top:45px;} #idDrag11{left:10px;top:75px;} #idDrag12{left:150px;top:75px;} #idDrag13{left:290px;top:75px;} #idDrag14{left:430px;top:75px;} #idDrag15{left:570px;top:75px;} </style> <script type="text/javascript"><!-- /*-------------------------------------------------------------- * 程序名:拖拽區(qū)域塊 * 修改者:草履蟲 * email:caolvchong@gmail.com * 主頁:http://cceer.xmu.edu.cn/blog/ * 原始來源:http://bbs.blueidea.com/thread-2817125-1-1.html * 增加功能:拖拽后的z-index設(shè)置 * Plus:有疑問或者建議請(qǐng)聯(lián)系email * -------------------------------------------------------------- */ //<![CDATA[ function move(id){ this.node = document.getElementById(id); this.name = id; this.node.style.cursor = "move"; this.zindex = parseInt(this.node.getAttribute("id").replace(/\D/g,"")); this.node.style.zIndex = this.zindex; this.node.me = this; this.node.onmousedown = this.mouse_down; } move.prototype.mouse_down = function(e){ e = window.event?window.event:e; this.me.node.style.zIndex = 10000;// --->被修改了,原來100,現(xiàn)在10000 this.me.node.sub_x = e.clientX - this.me.node.offsetLeft; this.me.node.sub_y = e.clientY - this.me.node.offsetTop; this.me.node.onmousemove = this.me.mouse_move; this.me.node.onmouseup = this.me.mouse_up; } move.prototype.mouse_move = function(e){ e = window.event?window.event:e; this.me.node.style.cursor = "pointer"; this.me.node.style.left = e.clientX - this.me.node.sub_x "px"; this.me.node.style.top = e.clientY - this.me.node.sub_y "px"; this.me.node.onmouseup = this.me.mouse_up; } move.prototype.mouse_up = function(){ this.me.node.onmousemove = ""; this.me.node.style.cursor = "move"; this.me.node.style.zIndex = this.me.zindex; //還原被增加的z-index var z_index = this.me.zindex ; //獲取當(dāng)前z-index for(var i = 0; i < document.getElementsByTagName("div").length; i ){ //獲取最大z-index if(z_index < document.getElementsByTagName("div")[i].style.zIndex){ z_index = parseInt(document.getElementsByTagName("div")[i].style.zIndex); } } this.me.node.style.zIndex = z_index 1; //移動(dòng)后的z-index,而不是還原 } window.onload = function(){ new move("idDrag1"); new move("idDrag2"); new move("idDrag3"); new move("idDrag4"); new move("idDrag5"); new move("idDrag6"); new move("idDrag7"); new move("idDrag8"); new move("idDrag9"); new move("idDrag10"); new move("idDrag11"); new move("idDrag12"); new move("idDrag13"); new move("idDrag14"); new move("idDrag15"); } // --></script> </head> <body> <!--A字符--> <div class="card" id="idDrag1"> <div class="front"> <b class="N1 nA"></b> <em class="First small_up1"></em> <span class="BM up1"></span> <em class="Last small_down1"></em> <b class="N2 nA_h"></b> </div> </div> <!--2字符--> <div class="card" id="idDrag2"> <div class="front"> <b class="N1 n2_red"></b> <em class="First small_up2"></em> <span class="AM1 up2"></span> <span class="CM1 down2"></span> <em class="Last small_down2"></em> <b class="N2 n2_h_red"></b> </div> </div> <!--3字符--> <div class="card" id="idDrag3"> <div class="front"> <b class="N1 n3"></b> <em class="First small_up3"></em> <span class="AM1 up3"></span> <span class="BM up3"></span> <span class="CM1 down3"></span> <em class="Last small_down3"></em> <b class="N2 n3_h"></b> </div> </div> <!--4字符--> <div class="card" id="idDrag4"> <div class="front"> <b class="N1 n4_red"></b> <em class="First small_up4"></em> <span class="A1 up4"></span> <span class="A4 down4"></span> <span class="C1 up4"></span> <span class="C4 down4"></span> <em class="Last small_down4"></em> <b class="N2 n4_h_red"></b> </div> </div> <!--5字符--> <div class="card" id="idDrag5"> <div class="front"> <b class="N1 n5"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="A4 down1"></span> <span class="BM up1"></span> <span class="C1 up1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n5_h"></b> </div> </div> <!--6字符--> <div class="card" id="idDrag6"> <div class="front"> <b class="N1 n6"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="AM up1"></span> <span class="A4 down1"></span> <span class="C1 up1"></span> <span class="CM up1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n6_h"></b> </div> </div> <!--7字符--> <div class="card" id="idDrag7"> <div class="front"> <b class="N1 n7_red"></b> <em class="First small_up2"></em> <span class="A1 up2"></span> <span class="AM up2"></span> <span class="A4 down2"></span> <span class="BM up2"></span> <span class="C1 up2"></span> <span class="CM up2"></span> <span class="C4 down2"></span> <em class="Last small_down2"></em> <b class="N2 n7_h_red"></b> </div> </div> <!--8字符--> <div class="card" id="idDrag8"> <div class="front"> <b class="N1 n8"></b> <em class="First small_up3"></em> <span class="A1 up3"></span> <span class="A2 up3"></span> <span class="A3 down3"></span> <span class="A4 down3"></span> <span class="C1 up3"></span> <span class="C2 up3"></span> <span class="C3 down3"></span> <span class="C4 down3"></span> <em class="Last small_down1"></em> <b class="N2 n8_h"></b> </div> </div> <!--9字符--> <div class="card" id="idDrag9"> <div class="front"> <b class="N1 n9_red"></b> <em class="First small_up4"></em> <span class="A1 up4"></span> <span class="A2 up4"></span> <span class="A3 down4"></span> <span class="A4 down4"></span> <span class="BM up4"></span> <span class="C1 up4"></span> <span class="C2 up4"></span> <span class="C3 down4"></span> <span class="C4 down4"></span> <em class="Last small_down4"></em> <b class="N2 n9_h_red"></b> </div> </div> <!--10字符--> <div class="card" id="idDrag10"> <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> <!--J字符--> <div class="card" id="idDrag11"> <div class="front"> <b class="N1 nJ"></b> <em class="First small_up1"></em> <span class="J1 up1"></span> <span class="BJ"></span> <span class="J4 down1"></span> <em class="Last small_down1"></em> <b class="N2 nJ_h"></b> </div> </div> <!--Q字符--> <div class="card" id="idDrag12"> <div class="front"> <b class="N1 nQ_red"></b> <em class="First small_up2"></em> <span class="J1 up2"></span> <span class="BQ"></span> <span class="J4 down2"></span> <span class="Last small_down2"></span> <b class="N2 nQ_h_red"></b> </div> </div> <!--K字符--> <div class="card" id="idDrag13"> <div class="front"> <b class="N1 nK"></b> <em class="First small_up3"></em> <span class="J1 up3"></span> <span class="BK"></span> <span class="J4 down3"></span> <em class="Last small_down3"></em> <b class="N2 nK_h"></b> </div> </div> <!--K字符--> <div class="card" id="idDrag14"> <div class="front"> <b class="N1 nK nK_red"></b> <em class="First small_up4"></em> <span class="J1 up4"></span> <span class="BK"></span> <span class="J4 down4"></span> <em class="Last small_down4"></em> <b class="N2 nK_h nK_h_red"></b> </div> </div> <!--背面圖案--> <div class="card" id="idDrag15"> <div class="back"> </div> </div> </body> </html>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
<style type="text/css">
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中間圖片通用設(shè)置*/
span{
display:block;
width:20px;
height:30px;
line-height:30px;
position:absolute;
font-size:26px;
left: 22px;
top: 130px;
}
/*小圖片通用設(shè)置*/
/*數(shù)字通用設(shè)置*/
b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}
/*各坐標(biāo)點(diǎn)位置*/
.A1{left:21px;top:10px;}
.A2{left:21px;top:50px;}
.A3{left:21px;top:90px;}
.A4{left:21px;top:130px;}
.B1{left:51px;top:76px;}
.C1{left:83px;top:10px;}
.C2{left:83px;top:50px;}
.C3{left:83px;top:90px;}
.C4{left:83px;top:130px;}
.scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
.index {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
left:5px;
top:0px;
}
.end {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
right:5px;
bottom:0px;
}
.red { color: #ff0000; }
.font{font-size:34px;}
</style>
<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>

相關(guān)文章

  • CSS Sprites 樣式生成工具 3.0

    很高興為大家?guī)砹薈SS Sprites 樣式生成工具 3.0版本。 保存的設(shè)置文件也同時(shí)更新了，支持打開舊的文件，會(huì)以新的格式保存（舊版本打不開）。 操作界面做了小小的調(diào)整
    2009-06-23

  • CSS Sprites簡(jiǎn)介以及優(yōu)缺點(diǎn)

    阿里媽媽UED談CSS Sprites技術(shù).
    2009-10-20

  • 使用CSS sprite 的好處和壞處分析

    無處不在的 CSS sptites － 為數(shù)不多的幾個(gè)可以直接跳過”流行”這個(gè)過程，而可以馬上并且牢牢地躋身于最佳 CSS 實(shí)踐之中的幾個(gè)技術(shù)之一。
    2010-04-17

  • 什么是CSS Sprites（圖片合并）技術(shù) 圖文介紹

    眾所周知，減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過CSS Sprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS
    2011-06-21

  • CSS Sprites詳解

    CSS Sprites技術(shù)不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發(fā)表對(duì)該技術(shù)的 詳細(xì)闡述 。原先只在CSS玩家之間作為一種制作方法流傳，后來出來個(gè) 14 Rules
    2011-08-02

  • css sprites技術(shù) CSS Sprites圖片切割術(shù)與圖片優(yōu)化深入理解

    近段時(shí)間一直在做前臺(tái)的一些東西，涉及到很多div+css的問題,原來這個(gè)叫CSS Sprites技術(shù),我對(duì)前臺(tái)這些個(gè)東西比較感興趣，所以會(huì)去了解多一點(diǎn)
    2012-12-03

  • 淺談CSS Sprites切圖技術(shù)

    CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位
    2014-12-12

  • CSS Sprite從大圖中截取小圖完整教程

    這篇文章主要介紹了CSS Sprite從大圖中截取小圖完整教程的相關(guān)資料,需要的朋友可以參考下
    2014-12-29

最新評(píng)論