1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用？
答：CSS Sprite，中文叫雪碧圖，也有人喊CSS精靈嘀掸，就是一種背景拼合的技術(shù)，然后通過background-position來顯示雪碧圖中需要顯示的圖像规惰。雪碧圖被運用在眾多使用了很多小圖標(biāo)的網(wǎng)站上睬塌。
作用：
1.服務(wù)器上都每一個資源都需要加載，圖片也是如此歇万，如果有許多不同的icon揩晴，就需要有多次的請求，如果合成一張圖片就可以減少請求的次數(shù)贪磺，從而提高加載速度文狱；
2.可以降低圖片占用字節(jié)
參考資料：CSS雪碧圖
2.img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別？
-
如下場景使用img標(biāo)簽比較合適：
1缘挽、如果圖像是內(nèi)容的一部分，使用Img標(biāo)簽呻粹。
2壕曼、使用img(alt文本)圖像有一個重要的語義時,比如一個警告圖標(biāo)。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器等浊。
3腮郊、如果你依賴于瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯的效果時使用Img標(biāo)簽。
4筹燕、如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用Img標(biāo)簽轧飞。
5、使用img代替有背景圖像可以顯著提高性能的動畫背景撒踪。
6过咬、IMG會首先加載因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像，加載樣式表加載后,延遲加載的網(wǎng)頁制妄。 -
如下場景使用CSS背景比較合適：
1掸绞、如果圖像不是內(nèi)容的一部分時使用backgrond-image。
2耕捞、如果你想打印頁面并且你不想要的圖像包括默認情況下使用backgrond-image衔掸。
3.如果需要縮短下載時間通過CSS sprites 時使用backgrond-image
4.如果你只需要展示圖像的一部分通過CSS sprites，時使用backgrond-image
5.如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image
參考文檔：如何使用img標(biāo)簽和CSS背景
3.title和 alt屬性分別有什么作用俺抽？
- title是一個全局屬性敞映，主要是為元素增加一個小提示或者注釋，當(dāng)鼠標(biāo)hover到這個有title屬性的元素時磷斧，title的值會在鼠標(biāo)的旁邊顯示出來振愿。
- alt主要是當(dāng)圖片無法加載的時候用來替代圖片的文字內(nèi)容
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思捷犹？
答：這句話是一個background屬性的shorthand，其中的值是background-image埃疫、bakground-position伏恐、background-repeat三個屬性的簡寫.
- background-image可以為背景引入背景圖片，接受的值是一個相對URL地址或絕對URL地址
- background-position可以指定背景圖片的初始位置
- background-repeat表示的是背景圖片是否重復(fù)栓霜，默認的值是repeat
所以這一句話的意思是引入一個背景圖片翠桦，位置左上角，不重復(fù)胳蛮。
5.background-size有什么作用? 兼容性如何? 常用的值是?
答：background-size屬性規(guī)定背景圖像的尺寸销凑，可已用像素值、百分比仅炊、em或rem值和一些關(guān)鍵字來設(shè)置其值斗幼。
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖像的高度和寬度，第一個值設(shè)置寬度抚垄，第二個值設(shè)置高度蜕窿。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"呆馁。 |
| percentage | 以父元素的百分比來設(shè)置背景圖像的寬度和高度桐经。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域浙滤。（背景圖像的某些部分也許無法顯示在背景定位區(qū)域中阴挣。） |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域纺腊。 |
兼容性：
IE8以上瀏覽器均被兼容畔咧。
6.如何讓一個div水平居中？如何讓圖片水平居中揖膜？
答：div是塊級元素誓沸，要讓它水平居中，可以設(shè)置div{margin:0 auto;}
圖片是行內(nèi)元素次氨，它的父容器是塊級元素且要在父容器上設(shè)置text-align:center,可以讓圖片水平居中蔽介。
7.如何設(shè)置元素透明? 兼容性？
答：(1)rgba(0,0,0,0.5),a表示透明度煮寡，0=透明虹蓄，1=不透明；
(2)opactiy:0.5;filter:Alpha(opacity=50); /* IE8 以及更早的瀏覽器 */;
- rgba（）的兼容性：IE8以上都兼容
- opactiy的兼容性：IE8部分支持幸撕，以上都兼容
8.opacity和 rgba都能設(shè)置透明薇组，有什么區(qū)別？
答：區(qū)別：1）坐儿、opacity作用于元素以及元素內(nèi)的所有內(nèi)容的透明度律胀，而rgba()只作用于元素的顏色或其背景色宋光。
2）、opacity會繼承父元素的 opacity 屬性炭菌，而rgba()設(shè)置的元素的后代元素不會繼承透明性,只是針對自己本身有效罪佳，無法使內(nèi)部的所有元素透明。
由上面例子可以看出設(shè)置opacity不僅改變背景顏色的透明度黑低，還改變了它里面的內(nèi)容赘艳，邊框透明度。設(shè)置rgba只改變了背景色的透明度克握，它的內(nèi)部的內(nèi)容蕾管，邊框都不變。
