一、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è)置的透明,子元素不會繼承
