1，CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
- css sprite指的是一些圖片（多為圖標(biāo)）拼接在一起的圖片。
- 作用：可以在不用數(shù)據(jù)請(qǐng)求的前提下，只是通過位置的定位來實(shí)現(xiàn)不同需求的不同圖片展示。
利用CSS Sprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率。
更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變。維護(hù)起來更加方便。
2，img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別?
- img標(biāo)簽適合圖片不固定的情況，比如廣告圖片，不確定一直會(huì)是一樣的圖片；
- css背景使用圖片適合圖片固定，不輕易改變的情況，比如圖標(biāo)等。
如下場(chǎng)景使用img標(biāo)簽比較合適：
如果圖像是等內(nèi)容的一部分或圖表或人，使用Img標(biāo)簽加上alt屬性。
如果需要打印頁面并且默認(rèn)情況下打印圖片則使用IMG。
使用IMG(alt文本)圖像有一個(gè)重要的語義時(shí),比如一個(gè)警告圖標(biāo)。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器。
如果你依賴于瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯(cuò)的效果時(shí)使用IMG。
如果配合 z - index 伸展背景圖像來填補(bǔ)它的整個(gè)窗口時(shí)使用IMG。
使用img代替有背景圖像可以顯著提高性能的動(dòng)畫背景。
如下場(chǎng)景使用background-image屬性比較合適：
如果圖像不是內(nèi)容的一部分時(shí)使用backgrond-image。
當(dāng)圖像代替文本使用時(shí)使用backgrond-image。
如果你想打印頁面并且你不想要的圖像包括默認(rèn)情況下使用backgrond-image。
如果需要縮短下載時(shí)間通過CSS sprites 時(shí)使用backgrond-image。
如果你只需要展示圖像的一部分通過CSS sprites時(shí)使用backgrond-image。
如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時(shí)使用backgrond-image。
3，title和 alt屬性分別有什么作用?
- title屬性是對(duì)鏈接進(jìn)行補(bǔ)充解釋的作用，通過鼠標(biāo)懸停在連接處查看；
- alt屬性是當(dāng)鏈接加載出現(xiàn)問題才會(huì)顯示的，對(duì)鏈接內(nèi)容的解釋補(bǔ)充作用。
4，background: url(abc.png) 0 0 no-repeat;這句話是什么意思?
- 這句話的意思是：設(shè)置背景圖片（鏈接是abc.png）坐標(biāo)為0px 0px(左上角)，采用不重復(fù)的方式展現(xiàn)。
5，background-size有什么作用? 兼容性如何? 常用的值是?
-作用：為背景圖片設(shè)置尺寸。
- 兼容性：
- 常用的值：
- length：設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。
- percentage：以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。
- cover：把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
- contain：把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
6，如何讓一個(gè)div水平居中？如何讓圖片水平居中?
7，如何設(shè)置元素透明? 兼容性？
opacity：0~1
rgba:0,0,0,0-1
8，opacity和 rgba都能設(shè)置透明，有什么區(qū)別?
- opacity屬性作用于該元素和該元素的子元素，子元素可以繼承；
- rgba只作用于元素的顏色或元素的背景色，子元素不會(huì)繼承.
