CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
- 雪碧圖是運用在需要很多小圖標小圖片的場合，將很多小尺寸的圖片集合在一張大圖上，使用時通過background屬性選擇所需圖片的位置、大小。
- 使用雪碧圖將原本需要多次進行數據請求的操作，變為一次請求所有需要的數據，減少請求次數就減少的頁面加載的時間。
- 雪碧圖可以使用 http://csssprites.com/ 進行合成，選擇所有需要的圖片之后點擊GENERATE即可生成，注意不要上傳較大的圖片，而且這也不符合雪碧圖的用處。
csssprites.com
img標簽和CSS背景使用圖片在使用場景上有何區別
- 在圖片是需要被展示的內容的一部分的時候使用img標簽，alt屬性可以在圖片未能展現出來的時候對內容進行提示，并且對SEO友好
- img標簽的圖片用戶可以方便的保存Logo或者復制Logo圖片的鏈接
- 當圖像不是內容的時候使用background-image，當小圖標使用雪碧圖的時候使用background-image
title 和 alt屬性分別有什么作用
- title屬性是鼠標移動到元素上顯示的提示標簽，是對元素的補充解釋和說明
- alt屬性是在元素加載不出來的時候，顯示在頁面上的文字，用來解釋說明這個沒有被顯示出的元素。
background: url(abc.png) 0 0 no-repeat;這句話是什么意思
-
等效于
background-image: url(abc.png );//設定圖片地址 background-position: 0 0;//設定背景圖片的位置 background-repeat: no-repeat;//設定不重復 此外background還有其他可能的屬性：
| 屬性 | 作用 |
|---|---|
| background-color | 設定背景顏色 |
| background-size | 設定背景圖片尺寸 |
| background-origin | 設定定位區域 |
| background-clip | 設定繪制區域 |
| background-attachment | 設定背景圖像是否固定 |
background-size有什么作用? 兼容性如何? 常用的值是?
- 用以設定背景圖片的尺寸，可能的值有
- cover 把背景圖像擴展為足夠大，使背景圖像完全覆蓋區域，背景圖像的某些區域可能超過顯示范圍。
- contain 使圖像在內容區域盡量大的完整顯示，并長寬比不變。
- 也可以直接設定寬度和高度，例如 80px 90px ，第一個值設定寬度，另一個設定高度，如果只設定一個值，第二個值為auto。
- 還可以相對父元素的百分比來設定寬高，例如 15% 100%，第一個值設定寬度，另一個設定高度，如果只設定一個值，第二個值為auto。
-
兼容性上，支持IE9以上的瀏覽器，不支持IE8
background-size兼容性
如何讓一個div水平居中？如何讓圖片水平居中
-
可以設置
margin: 0 auto;使塊級元素居中。注意塊級元素本身是充滿一整行的，所以前提是給這個塊級元素設定一個寬度。
div居中 給圖片的父元素上添加
text-align: center;屬性即可，這個屬性作用在塊級元素，使其內部的行內元素水平居中。
示例
如何設置元素透明? 兼容性？
-
opacity: 0~1;使元素及子元素透明
opacity兼容性
opacity 和 rgba都能設置透明，有什么區別
- opacity使元素整體透明，是元素的屬性；rgba將顏色設置為透明，是顏色的屬性，不涉及子元素。
- 示例：http://js.jirengu.com/zexohajuda/1/edit
示例
本教程版權歸 張宇 和 饑人谷 所有，轉載需要說明來源
