1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
答：因為每一個url都會發(fā)送一次網(wǎng)絡(luò)請求，然而icon本身就不大，所以要把頁面中所有小的icon圖標集合在同一張大圖上，然后用position屬性定位圖片。作用是減少網(wǎng)絡(luò)請求，每次加載的都是緩存。
- 減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù):可以合并多數(shù)背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務(wù)器的請求次數(shù)，降低服務(wù)器壓力，同時提高了頁面的加載速度，節(jié)約服務(wù)器的流量。
- 提高頁面的加載速度:sprite 技術(shù)的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF 只有相關(guān)的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非?？赡鼙劝岩粡垐D分成多張得來的圖片總尺寸小。
- 減少鼠標滑過的一些bug:IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會出現(xiàn)這種現(xiàn)象。
2.img標簽和CSS背景使用圖片在使用場景上有何區(qū)別
答：一般來說，Img標簽更多的定義是“活”的東西，可變的。比如在網(wǎng)站中banner廣告肯定是運用了img標簽來添加圖片，Img會包裹在a鏈接里面方便用戶點開。而CSS中的背景圖片就是一些比較固定的圖片，在網(wǎng)站中存在而不會變化也不能被點開。
3.title和 alt屬性分別有什么作用?
答：title屬性更多是提供一個額外信息的意思，當鼠標放在連接上的同時會出現(xiàn)提示或者補充信息。alt更多體現(xiàn)一個代替的作用，當原本應(yīng)該出現(xiàn)的圖片沒有正常顯示，Alt的值會被現(xiàn)實出來以便用戶解讀。
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思？
答：這句話代表在背景圖片的設(shè)置，首先abc這張圖來自與htm文檔l同一個文件夾；0 0 代表 在頁面中的水平與垂直位置則為左上角；no-repeat表示背景圖片不會重復平鋪。
5.background-size有什么作用? 兼容性如何? 常用的值是?
答：background-size用來規(guī)定背景圖片的尺寸。
常用的值有：length/percentage/cover/contain;
length
設(shè)置背景圖像的高度和寬度。
第一個值設(shè)置寬度，第二個值設(shè)置高度。
如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。
percentage
以父元素的百分比來設(shè)置背景圖像的寬度和高度。
第一個值設(shè)置寬度，第二個值設(shè)置高度。
如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。
cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain
把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
6.如何讓一個div水平居中？如何讓圖片水平居中
答：讓div水平居中可以寫 margin :o auto語句。給div設(shè)置一個固定的寬度，左右margin相等（auto）。因為一個div是一個區(qū)塊，區(qū)塊中的內(nèi)容可以直接對div設(shè)置text-align：center，也就是針對父級元素設(shè)置。
7.如何設(shè)置元素透明? 兼容性？
答：opacity屬性可以設(shè)置透明度。0-1，0是完全透明，1是完全不透明。 如果讓div透明的話 整個區(qū)塊都是透明的；背景色透明只是針對背景顏色。
8.opacity和 rgba都能設(shè)置透明，有什么區(qū)別？
答：RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度的意思。它與opacity的區(qū)別在于opacity會繼承父元素的 opacity 屬性，而RGBA設(shè)置的元素的后代元素不會繼承不透明屬性。
本文版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載請注明出處
