2012年10月29日 星期一

CSS Sprites 實現方法

origin: https://github.com/QueenbyeR/blog-text/blob/master/CSS%20Sprites%20%E5%AF%A6%E7%8F%BE%E6%96%B9%E6%B3%95/page-001.md



CSS Sprites
早已技術存在很久，最大的亮點就是節約 Http request 等同於節約網頁連線耗時，加快網頁載入，其重點在於將各個小圖標大圖示密集地集中在一張 image 裡；不再浪費唇舌，這裡僅記錄 CSS 的實現方式。
支持 Chrome、Firefox 以及 IE。
最大的麻煩
就是每個圖標按鈕得一個一個調整 position，如果image之中的所有圖標排列具有規則邏輯性的話，倒可採用LESS來撰寫，會方便許多。
採用的圖片為：
CSS Sprites buttons
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>
<body>
    <div class="menu">
        <span class="button link-home"></span>
        <span class="button link-game"></span>
        <span class="button link-esport"></span>
    </div>
    <div style="clear: both;"></div>
</body>
</html>

body{
    background-color: black;
}

.button{
    background-image : url(http://tw.battle.net/sc2/static/images/layout/menu-tabs.jpg?v=2);
    display          : inline-block;
    float            : left;
    width            : 105px;
    height           : 76px;
    cursor           : pointer;
}

.link-home{background-position        : 0 0; }
.link-home:hover{background-position  : 0 -76px; }
.link-home:active{background-position : 0 -152px; }

.link-game{background-position        : -105px 0; }
.link-game:hover{background-position  : -105px -76px; }
.link-game:active{background-position : -105px -152px; }

.link-esport{background-position        : -210px 0; }
.link-esport:hover{background-position  : -210px -76px; }
.link-esport:active{background-position : -210px -152px; }
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)