CSS Sprite(雪碧圖|精靈圖)
雪碧圖是把多個背景圖片合成一張，通過background-position定位圖片，減少網(wǎng)絡(luò)請求。
雪碧圖的作用是通過整合圖片，減少對服務(wù)器的請求數(shù)量，從而加快頁面加載速度。

sprite在線工具：http://csssprites.com/

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

• 對于固定不變的內(nèi)容，如圖標(biāo)、欄目背景、圖片按鈕等用背景圖;
• 對于可變的內(nèi)容，圖片是和內(nèi)容相關(guān)的（如廣告、商品展示、用戶頭像等需要改變的），用圖片。

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

• title是鼠標(biāo)滑過時顯示的文字提示
• alt是圖片在無法顯示時用于代替圖片顯示的文字，利于搜索引擎優(yōu)化

background-size

• background-size用于設(shè)置背景圖片的大小

• 兼容性

  
  

• 常用值
  <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

• <length>值，指定背景圖片大小，不能為負(fù)值。

• <percentage>值，指定背景圖片相對背景區(qū)（background positioning area）的百分比。

• auto以背景圖片的比例縮放背景圖片。

• cover縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見。

• contain縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白。
  /* 關(guān)鍵字 /
  background-size: cover; /縮放背景圖片以完全覆蓋背景區(qū)，可能背景圖片部分看不見。/
  background-size: contain; /縮放背景圖片以完全裝入背景區(qū)，可能背景區(qū)部分空白。*/

    /* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的為auto */
    background-size: 50%;
    background-size: 3em;
    background-size: 12px;
    background-size: auto;
  
    /* 兩個值: 第一個值指定圖片的寬度，第二個值指定圖片的高度 */
    background-size: 50% auto;
    background-size: 3em 25%;
    background-size: auto 6px;
    background-size: auto auto;
  
    /* 逗號分隔的多個值：設(shè)置多重背景 */
    background-size: auto, auto;     /* 不同于background-size: auto auto */
    background-size: 50%, 25%, 25%;
    background-size: 6px, auto, contain;
  
    background-size: inherit; /*默認(rèn)*/
  

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

• div水平居中：設(shè)置margin: 0 auto;
  div水平居中一定要設(shè)置div的寬度
  
  
  
• 圖片水平居中：
  將img放在div內(nèi)，設(shè)置div的text-align: center;
  
  
  

如何設(shè)置元素透明?
設(shè)置元素透明度：opacity：0~1
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
兼容性

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

• opacity設(shè)置元素透明：元素里面的所有內(nèi)容都透明

• rgba設(shè)置元素背景色透明：只是背景顏色透明，其他不透明