首頁 > 開發者 > JavaScript

CSS Sprite 雪碧圖製作，csssprite雪碧圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

CSS Sprite 雪碧圖製作，csssprite雪碧圖

CSS Sprite 雪碧圖，簡單來說就是：

為了提高網頁的效能，減少載入次數，將一些不會經常隨網站內容變化的小表徵圖，集中放在一張大圖上，將該圖應作為background-image 嵌入頁面中，在需要相關表徵圖時，根據background-position設定座標值，達到目的。

 

一個例子，可以複製然後看一下效果：

 HTML代碼：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>sprite</title>    <link rel="stylesheet" href="css-sprite.css"></head><body><div class="container">    <ul class="menu">        <li class="cat-1">            <i></i>            <h3><a href="#">項目一</a></h3>        </li>        <li class="cat-2">            <i > </i>            <h3><a href="#">項目二</a></h3>        </li>        <li class="cat-3">            <i></i>            <h3><a href="#">項目三</a></h3>        </li>        <li class="cat-4">        <i></i>        <h3><a href="#">項目四</a></h3>    </li>        <li class="cat-5">        <i></i>        <h3><a href="#">項目五</a></h3>    </li>        <li class="cat-6">        <i></i>        <h3><a href="#">項目六</a></h3>    </li>        <li class="cat-7">        <i></i>        <h3><a href="#">項目七</a></h3>    </li>        <li class="cat-8">        <i></i>        <h3><a href="#">項目八</a></h3>    </li>        <li class="cat-9">        <i></i>        <h3><a href="#">項目九</a></h3>    </li>        <li  class="cat-10" >        <i></i>        <h3><a  href="#">項目十</a></h3>    </li>    </ul></div></body></html>

 

 CSS代碼：

/*通用設定*/.container, .menu {    margin:0;    padding:0;    line-height: 0;}a:link, a:visited {    text-decoration: none;    color: inherit;}a:hover {    color: orangered;}/*格式設定*/.menu {    width: 120px;    list-style-type: none;    border: 1px solid #ccc;}.menu li {    display: block;    height: 31px;    line-height: 31px;}li h3 {    font-size: 14px;    font-weight: 400;    border-bottom: 1px solid #eee;}li i {    background: url("img/sprite.png");    display: inline-block;    float: left;    width: 24px;    height: 24px;    margin: 0 15px 5px;}.cat-1 i{    background-position: 0 0;}.cat-2 i {    background-position: 0 -26px;}.cat-3 i{    background-position: 0 -52px;}.cat-4 i {    background-position: 0 -78px;}.cat-5 i{    background-position: 0 -104px;}.cat-6 i {    background-position: 0 -130px;}.cat-7 i{    background-position: 0 -156px;}.cat-8 i {    background-position: 0 -182px;}.cat-9 i{    background-position: 0 -208px;}.cat-10 i {    background-position: 0 -236px;}

 這是利用一個雪碧圖線上製作工具製作的圖，工具鏈接：http://lazytools.sinaapp.com/。 其他工具不清楚，但是該工具最後會產生表徵圖對應的位置CSS資訊，可直接使用，很方便。

  

以下是最終：

總結：對於新手而言，學習一個新知識點，應該多練習，自己寫代碼，光看光聽是不起作用的，看視頻的時候覺得都會，實際操作時會出各種問題，多練習也是不斷進步的最佳途徑。

不知道你是否懂得如何製作和運用雪碧圖，反正現在我是會了，呵呵。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
sprite class sprite coding sprite maker program sprite animator online unity sprite animation android sprite animation sprite maker unity
相關文章
漂亮簡單Javascript 調色盤代碼
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More