Css Sprite如何?映像拼合技術

來源:互聯網
上載者:User
本篇文章給大家分享的是關於Css Sprite如何?映像拼合技術,內容很不錯,有需要的朋友可以參考一下,希望可以協助到大家。

一、精靈圖使用情境:


二、Css Sprite(優點)

  1. 減少圖片的位元組。

  2. 減少網頁的http請求,從而大大的提高頁面的效能。

  3. 解決了網頁設計師在圖片命名上的困擾,只需對一張集合的圖片上命名就可以了,不需要對每一個小元素進行命名,從而提高了網頁的製作效率。

  4. 更換風格方便,只需要在一張或少張圖片上修改圖片的顏色或樣式,整個網頁的風格就可以改變。維護起來更加方便。

三、實現原理

css background-position

控制一個層可顯示的地區範圍大小,
通過一個視窗進行背景圖的滑動
執行個體:

代碼如下:

<!doctype html><html>    <head>        <meta charset="utf-8"/>        <title>background-position<</title>        <link rel="stylesheet" href="index.css"/>    </head>    <body>        <span class="oo span1"></span>        <span class="oo span2"></span>        <span class="oo span3"></span>        <span class="pp span4"></span>        <span class="ll span5"></span>         <span class="hh span6"></span>             </body></html>.body{    margin:0 auto;        text-align:center;}.oo{    display:block;    width:43px;    height:44px;    background:url(images/img_navsprites_hover.gif) no-repeat;    margin:20px auto;}.span1{    background-position:0 0;    position:absolute;    top:0px;}.span2{    background-position:-47px 0;    position:absolute;    top:0px;    left:60px;}.span3{    background-position:-94px 0;    position:absolute;    top:0px;    left:120px;}.span1:hover{    background-position:0 -45px;}.span2:hover{    background-position:-47px -45px;}.span3:hover{    background-position:-94px -45px;}.pp{    display:block;    width:38px;    height:38px;    background:url(images/pwd-icons-new.png) no-repeat;        margin:20px auto;}.span4{    background-position:-48px -96px;}.ll{    display:block;    width:24px;    height:26px;    background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;    margin:20px auto;}.span5{    background-position:0 -483px;}.hh{    display:block;    width:18px;    height:18px;    background:url(images/toolbars.png) no-repeat;    margin:20px auto;}.span6{    background-position:-95px -211px;}

**background-position:npx npx;
(第一個值是調左右的,當你需要將背景圖向右調的時候用正值, 向左則為負值 同理將背景圖上下調動的時候上是用負值,下是正值)**
<2>如下:
(這是原圖)

(這是選完以後的圖)

第一幅圖是原圖與暗圖的轉換;選了第二幅圖的鎖;第四幅圖的火車;第五幅圖的小人。

相關文章

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.