css sprites把很多小圖集成在一張圖片上
我要評論在google中搜索一下css sprites這個名稱，會查出很多信息，并且隨著SEO越來越被人們重視，采用這種技術來進行圖片優(yōu)化的網(wǎng)站越來越多，國內(nèi)幾家大型門戶網(wǎng)站無不仿效。如新浪，網(wǎng)易，搜狐。你下載一下他們的網(wǎng)站上的圖片，你會看到他們將很多小圖片全部集成在一張圖片上
不用圖片的純css實現(xiàn)方法
前面介紹了制作的撲克牌是用圖片的方式來實現(xiàn)，它逼真地還原了撲克牌。下面介紹一種比較簡單的實現(xiàn)方法，這種方法不用一張圖片。
原理是：用四個特別字符的html標簽來實現(xiàn)。
- ♠表示黑桃 ♥表示紅心 ♣表示梅花 ♦表示方塊
先寫結構：
<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>
再寫樣式：
注意：為了真實的還原一張撲克牌，我在第二張撲克牌中加入濾鏡功能，讓下面的圖案垂直翻轉，但這種方法會造成圖片不清晰，并且這種方法只有IE系列的瀏覽器才能識別，如果高手們有其它更好的辦法，請不吝賜教！
運行代碼框
<!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> <mce:style type="text/css"><!-- .card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中間圖片通用設置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小圖片通用設置*/ /*數(shù)字通用設置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐標點位置*/ .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;} /*中間圖片通用設置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小圖片通用設置*/ /*數(shù)字通用設置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐標點位置*/ .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 全部選擇 提示：你可先修改部分代碼，再按運行]
相關文章
- 很高興為大家?guī)砹薈SS Sprites 樣式生成工具 3.0版本。 保存的設置文件也同時更新了，支持打開舊的文件，會以新的格式保存（舊版本打不開）。 操作界面做了小小的調(diào)整2009-06-23
- 阿里媽媽UED談CSS Sprites技術.2009-10-20
- 無處不在的 CSS sptites － 為數(shù)不多的幾個可以直接跳過”流行”這個過程，而可以馬上并且牢牢地躋身于最佳 CSS 實踐之中的幾個技術之一。2010-04-17
- 眾所周知，減少網(wǎng)站加載時間的最有效的方式之一就是減少網(wǎng)站的HTTP請求數(shù)。實現(xiàn)這一目標的一個有效的方法就是通過CSS Sprites——將多個圖片整合到一個圖片中，然后再用CSS2011-06-21
- CSS Sprites技術不新鮮，早在2005年 CSS Zengarden 的園主 Dave Shea 就在 ALA 發(fā)表對該技術的 詳細闡述 。原先只在CSS玩家之間作為一種制作方法流傳，后來出來個 14 Rules2011-08-02
css sprites技術 CSS Sprites圖片切割術與圖片優(yōu)化深入理解
近段時間一直在做前臺的一些東西，涉及到很多div+css的問題,原來這個叫CSS Sprites技術,我對前臺這些個東西比較感興趣，所以會去了解多一點2012-12-03- CSS Sprites其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位2014-12-12
- 這篇文章主要介紹了CSS Sprite從大圖中截取小圖完整教程的相關資料,需要的朋友可以參考下2014-12-29