1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。
優(yōu)點：
<li>減少加載網(wǎng)頁圖片時對服務器的請求次數(shù)
可以合并多數(shù)背景圖片和小圖標，方便在任何位置使用，這樣不同位置的請求只需要調(diào)用一個圖片，從而減少對服務器的請求次數(shù)，降低服務器壓力，同時提高了頁面的加載速度，節(jié)約服務器的流量。
<li>提高頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時，單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小于所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非?？赡鼙劝岩粡垐D分成多張得來的圖片總尺寸小。
<li>減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片，所以，如果使用多張圖片，鼠標滑過會出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會出現(xiàn)這種現(xiàn)象。
<li>一個在線合成圖片的網(wǎng)站CSSsprite
參考：css雪碧圖
2.img標簽和CSS背景使用圖片在使用場景上有何區(qū)別
<li>CSS背景圖片用于頁面背景圖，適用于不需要點擊，沒有外鏈等過多操作的圖片。在網(wǎng)頁加載的過程中，以css背景圖存在的圖片會等到結(jié)構加載完成（網(wǎng)頁的內(nèi)容全部顯示以后）才開始加載。
<li>img是html里的img標簽，在網(wǎng)頁結(jié)構（內(nèi)容）的加載的過程同時就會被加載。
通常是非內(nèi)容的圖片就寫在css里面(用來修飾頁面的元素)，如果是內(nèi)容性的圖片就寫在html里面，
例如做一個有漂亮邊框的相冊。那么修飾邊框的圖片就寫在css里面，相框里面的內(nèi)容照片就寫在html里面。圖片做為背景，在圖片沒加載的時候或者加載失敗的時候，不會有個圖片的占位標記，不會出現(xiàn)紅叉。
3.title和 alt屬性分別有什么作用
alt屬性是在圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方，在SEO方面有很多的應用。而title屬性是在鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就會消失。
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思
其作用是在頁面中加一個背景圖片，"0 0"代表background-position的值，表示背景圖的定位，第一個“0”表示X軸位置為0，第二個“0”表示Y軸位置為0，即圖片位置在左上角。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
no-repeat表示此圖片不平鋪，也就是說在這個位置只出現(xiàn)一次，不會自動鋪滿，同時還有其他幾個值L：repeat:平鋪 repeat-x:橫向平鋪 repeat-y:縱向平鋪。
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size的作用是調(diào)整圖片在頁面上所占據(jù)的位置大小。
常用的值：
兼容性：
<li>background-size: cover; 指將圖片鋪滿background-size所規(guī)定的范圍。
<li>background-size: contain; 指將整個圖片包含在background-size所規(guī)定的范圍內(nèi)。
6.如何讓一個div水平居中？如何讓圖片水平居中
<li>div是塊元素，所以使用margin: 0 auto; 使其居中。
<li>img圖片是行內(nèi)元素，所以使用text-align:center;使其居中。
7.如何設置元素透明? 兼容性？opacity和 rgba都能設置透明，有什么區(qū)別
<li>opacity屬性能夠設置元素的不透明度，取值為0~1，0完全透明，1完全不透明。若是設置在父級div中，則整個div的文字、圖片都會顯示所設定的透明度。我們可以利用偽類hover來使圖片擁有選擇即被透明覆蓋的效果。
兼容性：
<li> rgba是用來控制元素的顏色和背景顏色。對文字無效。
本文版權歸作者和饑人谷所有，轉(zhuǎn)載請注明來源
