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