一、CSS Sprite(雪碧圖|精靈圖)指什麼? 有什麼作用？ CSS雪碧 即CSS Sprite,也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖像和背景圖片合併到一張圖片上，然後利用css的背景定位來顯示的圖片部分。 作用： 減少載入網頁圖片時對伺服器的請求次數； 提高頁面的載入 ...
一、CSS Sprite(雪碧圖|精靈圖)指什麼? 有什麼作用？
CSS雪碧 即CSS Sprite,也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖像和背景圖片合併到一張圖片上，然後利用css的背景定位來顯示的圖片部分。
作用：
減少載入網頁圖片時對伺服器的請求次數；
提高頁面的載入速度；
減少滑鼠滑過的一些bug.
二、img標簽和CSS背景使用圖片在使用場景上有何區別？
如果一張圖片是網頁內容的一部分，就該用img,否則建議用CSS背景圖。要註意logo是否屬於網頁內容的一部分。
示例：
如圖：百度logo就是img，二維碼就是CSS背景圖呈現出來的。
在網頁載入過程中，以CSS背景圖存在的圖片會等到結構載入完成之後開始載入，而html中的標簽img是網頁結構的一部分，會在載入結構的過程中載入，如果引入一個很大的圖片，
在圖片下載完成之前，img內容都不顯示。但是CSS引入同樣的圖片，網頁內容和結構載入完成，才開始載入背景圖片，不會影響用戶瀏覽網頁內容。
三、title和 alt屬性分別有什麼作用？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個應為字元或者用戶必須保證替換文字儘可能的短。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建設性的信息。使用title屬性提供非本質的額外信息。
四、background: url(abc.png) 0 0 no-repeat;這句話是什麼意思？
background:url(abc.png) 0 0 no-repeat;設置了背景圖片的屬性：
background-img:url(abc.png)指定要使用的背景圖片;
background-position:0 0:指定背景圖片的位置；
background-repeat:no-repeat:指定背景圖片僅顯示一次。
示例：
五、background-size有什麼作用? 相容性如何? 常用的值是?
background-size:用於控制背景圖片的大小。
相容性：
| 瀏覽器 | background-size |
|---|---|
| Firefox 3.6, Firefox 4 | 支持 |
| Chorme10 | 支持 |
| IE6，IE7，IE8 | 不支持 |
| IE9 | 支持 |
| Opera10,Opera11 | 支持 |
常用的值是：
- auto:此值為預設值，保持背景圖片的原始寬度和高度；
示例：
- length:用於給background-size一個具體的值；
示例：
其中第一個值是給背景圖片添加了寬度；第二個值是給背景圖片添加了高度值
- percentage
示例：
- cover:圖片會放大到適合容器的尺寸
示例：
- contain
示例：
六、如何讓一個div水平居中？如何讓圖片水平居中？
使得div水平居中使用margin:0 auto;示例：
圖片水平居中：
在它所在的塊級元素中添加text-align:center;
示例：
七、如何設置元素透明? 相容性?
可以使用：
css3的opacity:x,x的取值從0-1
css3的rgba(red green blue alpha),alpha的取值從0-1
相容性：
opacity
| 瀏覽器 | 相容性 |
|---|---|
| IE6,7,8 | 不支持 |
| IE9,10,11 | 支持 |
| chrome2.0.x | 支持 |
| Firefox3.0.10,3.5 | 支持 |
rgba
| 瀏覽器 | 相容性 |
|---|---|
| IE6,7,8 | 不支持 |
| IE9,10,11 | 支持 |
| chrome2.0.x | 支持 |
| Firefox3.0.10,3.5 | 支持 |
八、opacity和 rgba都能設置透明，有什麼區別？
opacity會繼承父元素的 opacity 屬性，而RGBA設置的元素的後代元素不會繼承不透明屬性。
示例：
參考：
註：版權所有，若有轉載請註明來源
