1. CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
- CSS Sprite指的是一種CSS圖像合并技術庇忌，是將小圖標和背景圖像合并到一張圖片上挺勿，然后利用css的背景定位來顯示需要顯示的圖片部分。
- 作用:雪碧圖的應用可以減少網(wǎng)站的HTTP請求數(shù)量颅围，提升網(wǎng)站加載性能蘸秘，對內(nèi)存和帶寬更加友好，提高用戶體驗度刻坊。
2. img標簽和CSS背景使用圖片在使用場景上有何區(qū)別?
- 對于固定不變的內(nèi)容枷恕，如圖標等用css背景圖。對于可變的內(nèi)容谭胚，圖片是和內(nèi)容相關的徐块，用img標簽；
3. title 和 alt屬性分別有什么作用?
- alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息灾而，它會直接輸出在原本加載圖片的地方胡控，而title屬性是在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了旁趟。
4. background: url(abc.png) 0 0 no-repeat;這句話是什么意思?
- 插入一張背景圖為abc.png的圖片昼激，橫縱位置都不偏移，圖片是不重復的锡搜；
5. background-size有什么作用? 兼容性如何? 常用的值是?
- background-size規(guī)定背景圖像的尺寸;
-
兼容性:
- 常用的值：
- background-size:cover;把背景圖像擴展至足夠大橙困，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中耕餐。
- background-size:contain; 把圖像擴展至最大尺寸凡傅，以使其寬度和高度完全適應內(nèi)容區(qū)域。
6. 如何讓一個div水平居中肠缔？如何讓圖片水平居中?
- div水平居中：
設置寬度然后用margin: 0 auto;屬性夏跷； - 圖片水平居中
- 1.在不設置寬度和高度的情況下因為img是行內(nèi)元素，所以先變?yōu)閴K級元素,用display:block; margin:0 auto;這兩個屬性一起使用才可以;
- 2.給圖片添加一個父容器桩砰，在圖片的父容器上設置text-align:center;屬性就能使圖片水平居中拓春；
7. 如何設置元素透明? 兼容性？
通過opacity：0~1設置元素透明;它的屬性值1表示完全不透明亚隅，0表示完全透明硼莽。可用以下方法補充：filter: alpha(opacity=0~100); background: rgba（255,0,0,0~1）來設定煮纵，其值越靠近0越透明;
-
兼容性如下:
8. opacity 和 rgba都能設置透明懂鸵，有什么區(qū)別?
- opacity設置透明，子元素會繼承行疏，會使整體都透明;
- rgba子元素則不會繼承,一般用于設置背景的透明度;
