久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長(zhǎng)資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      什么是css精靈

      css精靈是一種處理網(wǎng)頁(yè)背景圖像的方式。它其實(shí)就是把一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去,然后將大圖應(yīng)用于網(wǎng)頁(yè);這樣一來(lái),用戶訪問該頁(yè)面時(shí),只需向服務(wù)發(fā)送一次請(qǐng)求,網(wǎng)頁(yè)中的背景圖像即可全部展示出來(lái)。

      什么是css精靈

      本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

      什么是css精靈(sprite)?

      “CSS精靈”,也被稱為通常被解釋為“CSS圖像拼合”、“CSS貼圖定位”或“CSS圖片精靈”、“CSS雪碧圖”,是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。其實(shí)就是把一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來(lái),當(dāng)訪問該頁(yè)面時(shí),載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。

      當(dāng)用戶訪問該頁(yè)面時(shí),只需向服務(wù)發(fā)送一次請(qǐng)求,網(wǎng)頁(yè)中的背景圖像即可全部展示出來(lái)。

      例如:

      什么是css精靈

      優(yōu)點(diǎn)

      • 利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求,從而大大的提高頁(yè)面的性能,這也是CSS Sprites最大的優(yōu)點(diǎn),也是其被廣泛傳播和應(yīng)用的主要原因;

      • CSS Sprites能減少圖片的字節(jié),曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。

      • 解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾,只需對(duì)一張集合的圖片上命名就可以了,不需要對(duì)每一個(gè)小元素進(jìn)行命名,從而提高了網(wǎng)頁(yè)的制作效率。

      • 更換風(fēng)格方便,只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式,整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。

      精靈技術(shù)的使用

      css精靈圖(sprite)其實(shí)就是通過將多個(gè)圖片融合到一張圖里面,然后通過CSS background背景定位技術(shù)技巧布局網(wǎng)頁(yè)背景。在需要用到圖片的時(shí)候,現(xiàn)階段是通過CSS屬性background-image組合background-repeat, background-position等來(lái)實(shí)現(xiàn)圖片的顯示。

      示例:

      精靈圖分析:

      什么是css精靈

      代碼:

      <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title></title>     <meta name="viewport" content="width=device-width, initial-scale=1">      <style>         *{             margin: 0;             padding: 0;         }         .sprites{             width: 200px;             margin: 50px auto;         }         .sprites div{             margin: 5px;         }         .sprites span{             float: left;             width: 20px;              height:20px;             background: url('./images/icon.png');/* 引用精靈圖 */             background-size: 60px 40px;         }         .sprites1{             background-position: 0 0;         }         .sprites2{             background-position: -20px 0 !important;         }         .sprites3{             background-position: 0 -20px !important;         }         .sprites4{             background-position: -20px -20px !important;         }         .sprites5{             background-position: -40px 0 !important;         }     </style>  </head> <body>     <div class="sprites">         <div><span class="sprites1"></span>付款圖標(biāo)</div>         <div><span class="sprites2"></span>存款圖標(biāo)</div>         <div><span class="sprites3"></span>刪除圖標(biāo)</div>         <div><span class="sprites4"></span>粘貼圖標(biāo)</div>         <div><span class="sprites5"></span>笑臉圖標(biāo)</div>     </div> </body> </html>

      什么是css精靈

      學(xué)習(xí)視頻分享:css視頻教程

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)