本教程版權(quán)歸凱旋和饑人谷所有熬尺，轉(zhuǎn)載須說明來源
一 、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS雪碧 即CSS Sprite,也有人叫它CSS精靈仑嗅，是一種CSS圖像合并技術(shù)，該方法是將小圖像和背景圖片合并到一張圖片上，然后利用css的背景定位來顯示的圖片部分痢掠。
作用：
1.能夠減少頁面的請求數(shù)、降低圖片占用的字節(jié)嘲恍，以此來達(dá)到提升頁面訪問速度的目的
2.提高頁面的加載速度足画；
參考
二 、img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別
img標(biāo)簽：多用于圖片內(nèi)容經(jīng)常變更的場景佃牛，而且引用圖片地址時候使用的是src淹辞；
background-image：多用于圖片內(nèi)容不會經(jīng)常改變的場景，比如文字前面的ICON圖標(biāo)俘侠，引用圖片地址是使用的是url象缀；
在頁面加載方式上，img標(biāo)簽作為文檔內(nèi)容的一部分爷速，會隨頁面加載時同時加載進(jìn)來攻冷；
background-image作為樣式，要等頁面加載完后背景才開始加載
img標(biāo)簽屬于頁面內(nèi)容一部分遍希，background-image屬于樣式以起到修飾頁面的作用
三 等曼、title和 alt屬性分別有什么作用
title屬性用于給元素提供額外的信息,當(dāng)鼠標(biāo)懸浮在元素上時顯示，可以用在除了base凿蒜，basefont禁谦，head，html废封，meta州泊，param，script和title之外的所有標(biāo)簽;
alt屬性用文字替換無法顯示的的元素漂洋，當(dāng)元素?zé)o法顯示時顯示遥皂，只能用在img力喷、area和input元素中，長度必須少于100個英文字符演训；
三 弟孟、background: url(abc.png) 0 0 no-repeat;這句話是什么意思
背景圖像為abc.png圖像位置距元素左邊0px和上邊0px的位置
背景圖想不平鋪圖像不重復(fù)
ackground: url(abc.png) 0 0 no-repeat;
屬于背景樣式，具體含義是設(shè)置一張圖像地址位于abc.png和不產(chǎn)生平鋪效果的圖片样悟，并且圖像位置以元素左上角為基點(diǎn)圖像的左上角到基點(diǎn)的距離在橫縱坐標(biāo)上不發(fā)生偏移
四 拂募、background-size有什么作用? 兼容性如何? 常用的值是?
CSS 的 background-size 屬性能調(diào)整背景圖片的大小，從而替代了用原始大小顯示圖片的默認(rèn)行為
常用的值有以下幾類：auto——原始圖片大锌咚陈症；
length——根據(jù)給定長度值調(diào)整背景圖片大小震糖；
percentage——根據(jù)給定的百分比調(diào)整圖片大新伎稀；
contain——按比例調(diào)整背景圖片吊说，使得其圖片寬高比自適應(yīng)整個元素的背景區(qū)域的寬高比论咏，因此假如背景圖片過大，而背景區(qū)域的整體寬高比不能恰好包含背景圖片的話疏叨，那么其背景區(qū)域會出現(xiàn)空白潘靖，這個值多用于響應(yīng)式頁面穿剖；
cover——按比例調(diào)整背景圖片蚤蔓，這個值的屬性和contain正好相反，背景圖會按照比例填充背景區(qū)域糊余，如果背景圖片過大且不能正好按照寬高比包含背景區(qū)域秀又，那么背景圖片就會被裁減顯示不全；參考文獻(xiàn)
參考文檔
四 贬芥、如何讓一個div水平居中吐辙？如何讓圖片水平居中
可對div(塊級元素)設(shè)置margin：0 auto
設(shè)置水平居中 對圖片(行內(nèi)元素)設(shè)置text-align:center
設(shè)置水平居中 或者設(shè)置display:block，按照塊級元素設(shè)置蘸劈；
五 昏苏、如何設(shè)置元素透明? 兼容性？
div{
opacity:0.6;
filter:Alpah(opacity=60)/*IE8及之前版本*/
}
五 威沫、opacity 和 rgba都能設(shè)置透明贤惯，有什么區(qū)別
rgba只能作用于顏色或背景色，并不能使設(shè)置的顏色透明化棒掠；
opacity作用于元素以及元素內(nèi)部的所有元素的透明度孵构；倆者的兼容性都需要IE8以上版本的支持 參考文獻(xiàn)
