CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
CSSSprites是一種網頁圖片應用處理方式。它是作用是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，減少向服務器發送的請求，提高了頁面的性能。對于當前網絡流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。
img標簽和CSS背景使用圖片在使用場景上有何區別?
- img標簽是html的標簽，他是具有語義化的標簽;而CSS背景圖片是CSS的一種樣式起裝飾作用
- img標簽用于呈現網頁實質內容;background-image一般用于網站不變的內容,如一些icon
title和alt屬性分別有什么作用?
- title屬性規定關于元素的額外信息,用于鏈接的描述。當鼠標移至元素時，會顯示一段事先設定好的提示文本。
- alt 屬性指定了替代文本，用于在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。也可在 鼠標移至圖像上是顯示描述。
background: url(abc.png) 0 0 no-repeat;這句話是什么意思?
設置abc.png為背景圖片,不發生偏移(圖片位于元素左上角),不產生平鋪效果。
background-size有什么作用? 兼容性如何? 常用的值是?
- background-size規定背景圖片的尺寸
-
兼容性如下圖:
background-size.png - 常用的值有
| 值 | 描述 |
|---|---|
| length | 設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 |
如何讓一個div水平居中？如何讓圖片水平居中？
- div的水平居中可設置左右外邊距為auto實現,例如:
margin: 10px auto; - 圖片水平居中可在父容器中設置
text-align:center;實現
水平居中.png
如何設置元素透明? 兼容性？
opacity：0~1,兼容性如圖:
opacity.png
opacity和rgba都能設置透明，有什么區別？
opacity作用于整個標簽內的元素,包括文字圖片等等;而rgba只是顏色的一個參數而已。
兩種透明度區別.png
