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

1. CSS雪碧 即CSS Sprite,也有人叫它CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖像和背景圖片合并到一張圖片上，然后利用css的背景定位來顯示的圖片部分。

2.作用：

• 減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)；
• 提高頁面的加載速度；
• 減少鼠標(biāo)滑過的一些bug.
  二、img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別？
  如果一張圖片是網(wǎng)頁內(nèi)容的一部分，就該用img,否則建議用CSS背景圖。要注意logo是否屬于網(wǎng)頁內(nèi)容的一部分。
  示例：
  
  
  如圖：百度logo就是img，二維碼就是CSS背景圖呈現(xiàn)出來的。
  在網(wǎng)頁加載過程中，以CSS背景圖存在的圖片會(huì)等到結(jié)構(gòu)加載完成之后開始加載，而html中的標(biāo)簽img是網(wǎng)頁結(jié)構(gòu)的一部分，會(huì)在加載結(jié)構(gòu)的過程中加載，如果引入一個(gè)很大的圖片，在圖片下載完成之前，img內(nèi)容都不顯示。但是CSS引入同樣的圖片，網(wǎng)頁內(nèi)容和結(jié)構(gòu)加載完成，才開始加載背景圖片，不會(huì)影響用戶瀏覽網(wǎng)頁內(nèi)容。
  三、title和 alt屬性分別有什么作用？
  alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個(gè)應(yīng)為字符或者用戶必須保證替換文字盡可能的短。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
  title屬性為設(shè)置該屬性的元素提供建設(shè)性的信息。使用title屬性提供非本質(zhì)的額外信息。
  四、background: url(abc.png) 0 0 no-repeat;這句話是什么意思？
  background:url(abc.png) 0 0 no-repeat;設(shè)置了背景圖片的屬性：
  background-img:url(abc.png)指定要使用的背景圖片;
  background-position:0 0:指定背景圖片的位置；
  background-repeat:no-repeat:指定背景圖片僅顯示一次。
  示例：
  
  
  五、background-size有什么作用? 兼容性如何? 常用的值是?
  background-size:用于控制背景圖片的大小。
  兼容性：

常用的值是：

• auto:此值為默認(rèn)值，保持背景圖片的原始寬度和高度；
  示例：

• <length>:用于給background-size一個(gè)具體的值；
  示例：

  
  
  
  

  其中第一個(gè)值是給背景圖片添加了寬度；第二個(gè)值是給背景圖片添加了高度值

• <percentage>
  示例：

  
  

• cover:圖片會(huì)放大到適合容器的尺寸
  示例：

  
  

• contain
  示例：

  
  
  
  

  六、如何讓一個(gè)div水平居中？如何讓圖片水平居中？
  使得div水平居中使用margin:0 auto;示例：

  
  
  
  圖片水平居中：
  在它所在的塊級(jí)元素中添加text-align:center;
  示例：
  
  
  

  七、如何設(shè)置元素透明? 兼容性?
  可以使用：

• css3的opacity:x,x的取值從0-1
• css3的rgba(red green blue alpha),alpha的取值從0-1
  兼容性：
  opacity

rgba

八、opacity和 rgba都能設(shè)置透明，有什么區(qū)別？
opacity會(huì)繼承父元素的 opacity 屬性，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。
示例：

參考：

1. CSS background-repeat 屬性
2. CSS background 屬性
3. When to use IMG vs. CSS background-image?
4. 翻譯 – CSS3 Backgrounds相關(guān)介紹
5. CSS3 Background-size

注：版權(quán)歸本人所有，若有轉(zhuǎn)載請(qǐng)注明來源