美女视频亚洲天堂,a级销魂美女视频在线播放

創(chuàng)建簡單有用的CSS Sprites前端觀察 | CSS | 前端觀察

看見就非常 >《tip》

2014.09.28

關注

讓我們從頭開始吧. 什么是CSS Sprites?

CSS sprites (CSS精靈，也有人翻譯成CSS妖精) 是一種通過整合圖片來改善我們的頁面的加載時間，減少服務器請求數的方法。在這篇文章里，我將教你如何來實現(xiàn)它們。

看一下演示 | 下載

為了搞清楚什么是CSS sprite ,這里是一張 Google制作的CSS 精靈圖片：

當你用谷歌搜索的時候，你會發(fā)現(xiàn)頁面底部的分頁，你會看到就像這樣的東西： Gooooooooooooooogle. 字母 ‘o’ 是用CSS sprite平鋪的，這樣就替代了重復加載15次字母，它只是加載了包含所有字母的精靈，一次完成。

創(chuàng)建我們的CSS sprite – 步驟一: 制作圖片

Ok, 首先，我們必須制作我們的精靈圖片。你可以使用Fireworks，Photoshop或任何你能使用的軟件。這里是我做的：

正如你看到的，精靈是由一些中間被1像素款的線劃分開來的圖像組成的。這種區(qū)分不是真的必須的，就像你所看到的谷歌的精靈，但當我們寫CSS的時候它使我們的工作更加方便，請相信我。

步驟二: 創(chuàng)建我們的精靈圖片顯示者(顯示層)

一旦我們制作了我們的精靈圖片，我們必須制作一個透明的1px x 1px gif圖片。這個圖片稍后會是在我們的精靈里用來顯示不同的圖片的東西。

步驟三：編寫CSS代碼

首秀安，我們先創(chuàng)建一個類’sprite’，它將加載我們的Sprite圖片。

.sprite {background:url(../images/mySprite.png);}

在加載我們的精靈之后，我們必須精確定義里面的圖片的高度和寬度。

左右的圖片有同樣的高度，所有的應用也是，我可以給他們一個class來共用他們的高度。我將使用這兩個class：’monster’ 和 ‘application’。

.sprite {background:url(../images/mySprite.png);}
 
.monster {height:128px;}
.application {height:61px;}

現(xiàn)在，我們必須定義每一個圖片的寬度，因為他們是不同的。我們將為他們中的每一個定義一個class。

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}
 
/* Monsters */
.doctor {width:103px;}
.octopus {width:89px;}
.wolf {width:115px;}
.star {width:126px;}
.dog {width:128px;}
 
/* Applications -*/
.css {width:61px;}
.activityMonitor {width:58px;}
.dashboard {width:51px;}
.quicktime {width:53px;}
.scanner {width:74px;}

做完了？ Ok, 現(xiàn)在到最精彩的部分了。為了恰當的顯示，我們必須對每一個圖片定義個 background-position。這個background-position 必須一直有負值，因為我們的背景圖片必須向左移動，來顯示不同的圖片。

我們必須讓精靈里面的圖片想左上角移動，因為那里是我們開始看圖片的起點。那個角相當于 X軸的0px, Y軸的0px。

然而，我的精靈在左邊和上邊兩個像素的空白，所以當我們定義元素的background-position時我們必須重視它們。

記住background-position的第一個值, 是水平方向(x-軸) ，第二個是垂直方向(y-軸). 讓我們完成我們的這頭狼。我們的狼需要想左移動196px并向上移動 2px 。

.sprite {background:url(../images/mySprite.png);}
.monster {height:128px;}
.application {height:61px;}
 
/* Monsters */
.doctor {width:103px;}
.octopus {width:89px;}
.wolf {width:115px; background-position:-196px -2px;}
.star {width:126px;}
.dog {width:128px;}
 
/* Applications -*/
.css {width:61px;}
.activityMonitor {width:58px;}
.dashboard {width:51px;}
.quicktime {width:53px;}
.scanner {width:74px;}

現(xiàn)在讓我們用同樣的方法來完成所有的圖片：

.sprite {background:url(../images/mySprite.png);}
 
.monster {height:128px;}
.application {height:61px;}
 
/* Monsters */
.doctor {width:103px; background-position:-2px -2px;}
.octopus {width:89px; background-position:-106px -2px;}
.wolf {width:115px; background-position:-196px -2px;}
.star {width:126px; background-position:-312px -2px;}
.dog {width:128px; background-position:-439px -2px;}
 
/* Applications -*/
.css {width:61px; background-position:-2px -133px;}
.activityMonitor {width:58px; background-position:-64px -133px;}
.dashboard {width:51px; background-position:-123px -133px;}
.quicktime {width:53px; background-position:-175px -133px;}
.scanner {width:74px; background-position:-229px -133px;}

看一下這個元素的Y軸，所有的怪獸，和所有的應用(的Y軸)是一樣的。這是因為他們在同樣的垂直位置排在一行。因此，他們全部分享到頂部變現(xiàn)同樣的距離。

步驟四：編寫HTML 代碼(小意思)

<img src="images/transparent.gif" class="sprite monster doctor" alt="Doctor Image" />
<img src="images/transparent.gif" class="sprite monster octopus" alt="Octopus Image" />
 
<img src="images/transparent.gif" class="sprite monster wolf" alt="Wolf Image" />
<img src="images/transparent.gif" class="sprite monster star" alt="Star Image" />
 
<img src="images/transparent.gif" class="sprite monster dog" alt="Dog Image" />
<img src="images/transparent.gif" class="sprite application css" alt="Css Image" />
 
<img src="images/transparent.gif" class="sprite application activityMonitor" alt="ActivityMonitor Image" />
<img src="images/transparent.gif" class="sprite application dashboard" alt="Dashboard Image" />
 
<img src="images/transparent.gif" class="sprite application quicktime" alt="Quicktime Image" />
<img src="images/transparent.gif" class="sprite application scanner" alt="Scanner Image" />