前面的課程在學習的時候沒有總結，現在開始補充。學過之後留下點痕跡還是好的。這是任務四中必須課第二個視訊中的一個知識點雪碧圖。

本節課的主要任務有：
（1）雪碧圖
（2）滑動門
（3）CSS的漸變

一、雪碧圖
http://blog.csdn.net/bingkingboy/article/details/51059209

（1）什麼是雪碧圖：

CSS雪碧（CSS Sprite）：是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用CSS的背景定位來顯示需要顯示的圖片部分；

（2）雪碧圖實現原理

CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求的數量。這樣的圖片可以使用CSS background和background-position屬性渲染。

（3）優缺點分析

優點：
* 減少載入網頁圖片時對伺服器的請求次數。可以合併多數背景圖片和小圖示，方便在任何位置使用，這樣不同位置的請求只需要呼叫一個圖片，從而減少對伺服器請求的次數，降低伺服器的壓力。
* 提高頁面的載入速度。由所需圖片拼成的一張GIF圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的GIF只有相關的一個色表，而單獨分割的每一張GIF都有自己的一個色表，這就增加了總體的大小。

 * 減少滑鼠滑過的一些bug。IE6不會主動預載入滑鼠滑過 a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用雪碧圖，由於一張圖即可，所以不會出現這種現象。
 

缺點：
* 最大的問題是記憶體使用。除非這個雪碧圖片是被非常小心的組織，你就會最終使用大量的無用的空白。

 * 影響瀏覽器的縮放功能。如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了，瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說，是為了避免雪碧中相鄰的圖片被“露進來”。這對於小圖片沒有什麼問題，但是對於大圖片會是一個性能下降。

 * 拼圖維護比較麻煩。

 * CSS編寫變得困難。

 * CSS 雪碧呼叫的圖片不能被列印。

（4）使用雪碧圖前的知識點準備

 ** background：是個綜合的寫法，後面可以使用的屬性就是下面的這些，兩個屬性之間使用空格隔開就可以了，但是注意的是position和size中間要用單斜線隔開，並且position在前面，size在後面。如果只有一個會被預設為是position

 ** background-image：指定物件的背景影象。可以是真實圖片路徑或使用漸變建立的“背景影象”
 url()來載入一個圖片;也可以使用漸變建立背景圖：background-image: linear-gradient(to top,#45B5DA,#0382AD);關於漸變的語法在漸變的部分會學習總結

 ** background-position：指定物件的背景影象位置。預設值：0% 0%，效果等同於 left top ；可以使用百分比，也可以使用length。

設定或檢索對像的背景影象位置，必須先指定background-image屬性。
 

center：背景影象橫向和縱向居中
left：背景圖形在橫向上填充從左邊開始
right: 背景的影象在橫向上填充從右邊開始
top:背景影象在縱向上填充從頂部開始
bottom:背景影象在縱向上填充從底部開始。

該屬性提供2個引數值（left，top）（css3中以允許提供3，4個值）

如果提供3個或者4個，偏移量前必須有關鍵字。每個或偏移前都必須跟著一個邊界關鍵字（即left | right | top | bottom，不包括center），偏移量相對關鍵字位置進行偏移。
background:url(test1.jpg) no-repeat right 20px bottom 20px;

** background-size：指定物件的背景影象的尺寸大小。預設：auto

可是使用百分比，也可以是用length
auto:背景影象的真是大小
cover:將背景影象等比縮放到完全覆蓋容器，背景影象有可能超出容器。
contain：將背景影象等比縮放到寬度或高度與容器的寬度或高度相等，背景影象始終被包含在容器彙總

** background-repeat：指定物件的背景影象如何鋪排填充。

預設是repeat。可參考的取值：
repeat-x:背景影象在橫向上平鋪；
repeat-y:背景影象在縱向上平鋪；
repeat:背景影象在橫向和縱向平鋪；
no-repeat:背景影象不平鋪；
round：背景物件自動縮放直到適應且填充滿整個容器。
space：背景影象以相同的間距平鋪且充滿整個容器或某個方向.
如果在使用後面的兩個的時候覺得效果不明顯，可以注意下載入的圖片的尺寸和div的寬高

** background-attachment：指定物件的背景影象是隨物件內容滾動還是固定的。預設值：scroll。

取值：fixed:背景影象相對於窗體固定,元素滾動的時候，圖片不隨之滾動；

scroll：背景圖是相對於元素自身固定，內容動時背景圖也動。附加到元素的border。對於可以滾動的元素（設定為overflow:scroll的元素）。當background-attachment設定為scroll時，背景圖不會隨元素內容的滾動而滾動。

local：背景影象相對於元素內容固定，也就是說當元素隨元素滾動時背景影象也會跟著滾動，因為背景影象總是要跟著內容。對於可以滾動的元素（設定為overflow:scroll的元素）,設定background-attachment:local，則背景會隨內容的滾動而滾動。因為背景圖是相對於元素自身內容定位，開始固定，元素出現滾動條後背景圖隨內容而滾動。

** background-origin：指定物件的背景影象顯示的原點

預設值：padding-box
padding-box:從padding區域（含有padding）開始顯示背景影象；
border-box:從border區域（含border）開始顯示背景影象
content-box:從content區域開始顯示背景影象。

** background-clip：指定物件的背景影象向外裁剪的區域

padding-box：從padding區域（不含padding）開始向外裁剪背景
bordex-box:從border區域（不含border）開始向外裁剪背景
content-box:從content區域開始向外裁剪背景。
text:從前景內容的形狀作為裁剪區域向外裁剪，如此即可實現使用

** background-color：指定物件的背景顏色。預設值是transparent。可使用#808080

多重背景圖

<div class="test">
    定義多重背景影象
</div>
.test {
        width: 400px;
        height: 600px;
        /*第一個引數是url背景圖片的地址，第二個是否重複repeat，第三個position定位，第四個size背景影象的尺寸，第五個裁剪的位置clip*/
        background: url(images/back.png) no-repeat 10px 20px/60px 100px padding-box, url(images/back.png) no-repeat 50px 60px/ 60px 100px padding-box, url(images/back.png) no-repeat 90px 100px /60px 100px padding-box, #aaa;
        /*如果只寫了一個位置的10px 20px 會被預設為是position*/
        /*background: url(images/icon_vrShow.png) no-repeat 10px 20px padding-box,url(images/icon_vrShow.png) no-repeat 50px 60px padding-box,url(images/icon_vrShow.png) no-repeat 90px 100px  padding-box,#aaa;*/
    }

漸變色背景

<div class="gradient">
    使用漸變色繪製背景影象
    <p>漸變種類有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p>
</div>

 .gradient p {
        height: 100px;
        background-image: linear-gradient(to top, #45B5DA, #0382AD);
    }

round

<div class="round">
</div>

 .round {
        width: 800px;
        height: 800px;
        background-image: url(images/1.png);
        background-repeat: space;
        background-color: #aaa;
    }

attach

<div class="attach">
    /p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
    <p>1內容超出會出現滾動條</p>
</div>

.attach {
        width: 200px;
        height: 300px;
        border: 1px solid red;
        background-image: url(images/1.png);
        background-repeat: no-repeat;
        background-attachment: scroll;
        /*overflow: scroll;*/
        line-height: 1.5;
    }

雪碧圖

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
    <span class="icon5"></span>
    <span class="icon6"></span>
    <span class="icon7"></span>
    <span class="icon8"></span>
</div>

.box{
        width: 500px;
        height: 300px;
        border: 3px solid red;
        background-color: yellow;  
    }
    span{
        display: inline-block;
        width: 92px;
        height: 92px;
        border: 1px solid black;
        background-image: url(images/2.jpg);
        background-repeat: no-repeat;
        margin: 5px;
    }
    span.icon1{
        background-position: -5px -5px;
    }
    span.icon2{
        background-position: -108px -5px;
    }
    span.icon3{
        background-position: -211px -5px;
    }
    span.icon4{
        background-position: -315px -5px;
    }
    span.icon5{
        background-position: -5px -105px;
    }
    span.icon6{
        background-position: -108px -105px;
    }
    span.icon7{
        background-position: -211px -105px;
    }
    span.icon8{
        background-position: -315px -105px;
    }

下載的雪碧圖

執行介面

後續的會把剩餘的兩個知識點也總結出來。