一、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用

css sprite（雪碧圖），圖片合并在線工具可以合成圖片。把很小的圖片合成一張大圖。主要是一個小圖片就發(fā)一個網(wǎng)絡(luò)請求，圖片過多，浪費網(wǎng)絡(luò)資源，網(wǎng)頁卡，通過合并一張圖片，再通過background-position進行設(shè)置，減少網(wǎng)絡(luò)請求，使得頁面加載更快。

為了減少頁面加載次數(shù)，也可以把圖片轉(zhuǎn)base 64,直接把圖片變成數(shù)據(jù)，直接放在css中background:url(里面)沒有網(wǎng)絡(luò)請求，只不過CSS會變大，只適用于非常非常小的圖標(biāo)

二、img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別

1、img標(biāo)簽是html標(biāo)簽，css的背景圖片是樣式。

2、css背景圖片是多用于網(wǎng)頁上不變的內(nèi)容，比如購物車這種小icon,一般用背景圖片多；而背景圖是可變內(nèi)容的時候，或者需要點擊的，用的是img。比如各大購物網(wǎng)站，買家的頭像。

3、二者表述方式不一樣background:url();而<img src=""/>

三、title和alt屬性分別有什么作用

title是標(biāo)題，當(dāng)鼠標(biāo)懸浮在元素呢上面顯示的，alt是在圖片不能正常打開的時候，顯示的提示信息

四、background: url(abc.png) 0 0 no-repeat;這句話是什么意思

引用abc.png作為背景圖片，并且背景圖片不偏移，在父容器的左上角，且不重復(fù)

五、background-size有什么作用? 兼容性如何? 常用的值是?

background-size:設(shè)置圖片大小，使得圖片和父容器完美展示。

常用值為：

1、length(數(shù)值)。background-size:30px 30px（圖片的寬度和高度）

2、percentage（百分比）。background-size:100%(50%)可以用來設(shè)置背景圖片縮放與否。

3、background-size:cover（圖片可以整個容器覆蓋到）

4、background-size:contain(不管容器設(shè)置多大，圖片多大，可以把圖片包括進去，不會隨著容器變大而變大)

六、如何讓一個div水平居中？如何讓圖片水平居中

行內(nèi)元素和圖片：水平居中，用text-align:center

塊級元素：水平居中margin:0 auto;或者用margin-left:auto;margin-right:auto;

七、如何設(shè)置元素透明? 兼容性？

背景色透明和整體透明，如果讓div透明，是里面包含所有東西會透明。

新版本中img{opacity:0.5}，opacity取值0-1；IE8及更早版本語法為img{opacity:0.5;filter:alpha(opacity=0.5)}

更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明

八、opacity和rgba都能設(shè)置透明，有什么區(qū)別

opacity設(shè)置的透明，子元素會繼承。rgba設(shè)置的透明，子元素不會繼承