內聯圖片實現css sprite

來源:互聯網
上載者:User
內聯圖片實現css sprite 內容提要: CSS Sprite是一種網頁圖片應用處理方式,允許我們將頁面中的零星圖片整合到一個大圖中,使用background-image選擇sprite圖 片,width、height設定圖片顯示的地區,background-position設定所需圖片的座標位置。通過CSS Sprite方法將多張圖片組裝成一張,不但有效減少http請求

       CSS Sprite是一種網頁圖片應用處理方式,允許我們將頁面中的零星圖片整合到一個大圖中,使用background-image選擇sprite圖 片,width、height設定圖片顯示的地區,background-position設定所需圖片的座標位置。通過CSS Sprite方法將多張圖片組裝成一張,不但有效減少http請求,還有降低了圖片的尺寸。

這裡我們仍然需要使用sprite來組裝圖片,只是使用的方式崇background-image變成inline image,@_~

首先我們先Bing一下css clip屬性:

這個屬性用於定義一個剪裁矩形。對於一個絕對定義元素,在這個矩形內的內容才可見。出了這個剪裁地區的內容會根據 overflow 的值來處理。剪裁地區可能比元素的內容區大,也可能比內容區小。

有點晦澀。上例子(搗鼓了半天,還是原圖比較好,呵呵):

下面是是一樣有4個箭頭的圖片:

CSS Clip

首先我們需要一個img標籤: HTML

<img src="arrow-sprite.png" alt="right arrow" class="clip right-top" />

使用css clip,元素必須絕對位置 ,所以這裡需要一個class='clip'用來設定預設的left和top定位值。通過每個元素唯一的一個class設定各自獨立的樣式,如下: CSS

.clip        { position: absolute; top: 0; left: 0; }

.left-top { clip:rect(0 48px 48px 0); }
.right-top { clip:rect(0 96px 48px 48px); left: -48px; }
.left-btm { clip:rect(48px 48px 96px 0); top: -48px; }
.right-4 { clip:rect(48px 96px 96px 48px); top: -48px;left: -48px; }

注意: 其中rect中的值分別對應於:top right bottom left,和我們經常使用的padding、margin的設定類似。

clip標籤只是划出了整個sprite大圖中某一表現需要的那部分,然而整個img的寬度還是該多大有多大(此例中試96*96),感謝有 position:absolute,通過設定圖片為絕對位置使其脫離了文檔流,無論圖片有多大都不會影響到附近的其它元素,其中的top、left控制 元素的位移,調整需要的那部分圖片到恰當的位置,所以必須絕對位置。

現在絕對位置的img元素漂浮在文檔中,如果你想讓元素作為文檔的一部分,可以在外麵包一個相對定位的div: HTML

<div>
<img src="arrow-sprite.png" alt="right arrow" class="left-top" />
</div>
CSS
div{width:48px;height:48px;position:relative;}
瀏覽器載入

瀏覽器很聰明,頁面中不同地方如果使用同一張圖片,那麼只會載入一次。就和我們經常使用的background一樣

瀏覽器安全色性

該方法很好的工作在IE6、IE7、IE8、firefox、opera、Safari等一系列我所測試的瀏覽器,所以,放心的使用吧。

注意 :css 規則要求,在clip屬性值之間需要插入逗號(如果有人和我一樣使用Aptana編寫css代碼,會看到相關的錯誤提示資訊),但是顯然老版本的IE不喜歡這些(ie6、ie7),幸運的是沒有逗號的時候,在新版瀏覽器中,它們也能很好的工作。 後續思考

使用image實現sprite有幾個好處: 相對於空的span或div,img標籤對搜尋引擎和螢幕助讀程式更加友好(alt屬效能很好的描述圖片的內容); 使用text-indent實現圖片替換最大的問題是無法顯示圖片、而css起作用時使用者沒法看到常值內容,這種情況下alt的內容可以顯示; 頁面中相同的圖片,瀏覽器只會載入一次;

既然這麼好,為什麼網路上用的不多呢。

我想到的最大的局限是:對於那些無法查看樣式、而圖片顯示正常的使用者(比如手機使用者),開啟頁面隔幾行就看到一張無數小圖拼起來的spite圖片體驗可是很不好的。

即使是需要掌握的,至於怎麼用就要自己掂量了。

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.