CSS高級技巧(3)css精靈技術(sprite)

css sprite

概念

一種處理網頁背景圖像的方式。將一個頁面涉及到的所有零散背景圖像都集中到一張大圖中去,將大圖應用於網頁。這樣,當用戶訪問該頁面時,只需向服務器發送一次請求,網頁中的背景圖就可以全部顯示。這個大圖稱爲精靈圖。

使用方法

小的項目背景圖很少,沒必要啊使用精靈技術,背景圖很多的情況可以使用

使用定位取出圖片

background-image;

background-repeat;

background-position;

/* 
*/
<html>
<head> 
    <style>
    div {
        width: 17px;
        height: 13px;
        background: url(images/jd,png) no-repeat;
        background-positon: 0 -388px;    /* 根據座標選取圖片,若背景圖片往上移動,爲負值 */
    }

    </style>
</head>
<body>
    <div>
        
    <div>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章