[阮一峰老師的css技巧]
(http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html)
1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
指的是一種背景圖片的拼合技術。使用css雪碧圖，因為如果頁面圖標繁多，每顯示一張圖片都會向服務器發送請求，請求次數越多，造成延遲的可能性也就越大。當做成雪碧圖以后能夠減少頁面的請求數、降低圖片占用的字節，以達到提升頁面訪問速度的目的。 做好圖以后用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。（就像用望遠鏡看東西一樣，區別在于東西在動你望遠鏡不動。）
2.img標簽和CSS背景使用圖片在使用場景上有何區別
對于固定不變的網頁內容，如圖標等用背景圖。對于可變的的內容圖片是和內容相關的，用圖片。
3.title 和 alt屬性分別有什么作用
| 作用 | |
|---|---|
| alt | 由于某些原因無法查看圖像時提供了備選的信息 |
| title | 當鼠標移到元素上時顯示一段工具提示文本 |
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思
背景圖片為abc.png，向右先下分別偏移0px，表示x，y方向都不偏移，圖片不重復（平鋪）。
5.background-size有什么作用? 兼容性如何? 常用的值是?
可以設置背景圖片的大小。
**contain **:容器能把圖片全都包裹進來。
**cover **:圖片能把整個容器大小覆蓋到，有可能圖片部分不能顯示。
length:設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
percentage:以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。
6.如何讓一個div水平居中？如何讓圖片水平居中
div水平居中:因為div是個塊狀元素，所以可以用margin 0 auto ；
圖片水平居中：再其父元素上加上text-align：center；
7.如何設置元素透明? 兼容性？
rgba：rgba(red, green, blue, alpha)
alpha 數值是介于 0.0（完全透明）與 1.0（完全不透明）的數字。
opacity：0~1
opacity屬性也可以設置一個元素的透明度。
8.opacity和 rgba都能設置透明，有什么區別
opacity會繼承父元素的 opacity 屬性，而RGBA設置的元素的后代元素不會繼承不透明屬性
代碼題
使用CSS Sprite 把如下6張圖標圖片合并成一張圖片，做出如下效果, 當 hover 時背景變色
使用字體圖標(如 iconfont, 查找->加入購物車->下載 demo 、 fortawesome 或者fontello)實現上例效果
使用css border實現如下三角形[
代碼題答案 ??
本文版權歸作者饑人谷_Josh和饑人谷所有，轉載請注明來源