1. 背景圖定位上一小節(jié)的代碼運行過后看似好像沒什么問題，那么我們來給它加上個邊框試試：
加上邊框后發(fā)現(xiàn)它其實是有點歪了，偏左上角一點，這是因為background-image屬性默認是定位在元素的左上角的。 2. 來看一下定義背景圖位置的語法怎么寫：background-position: 你想要的位置;
想要的位置一共可以填兩個值，第一個值代表橫向的位置，第二個值代表縱向位置，如果省略第二個值默認是居中的。 你想要的位置可以是 top、center、bottom、left、right這種關鍵字，如：background-position: top right; 也可以是百分比數(shù)值，如：background-position: 100% 50%; 還可以是具體的數(shù)字單位，如：background-position: 100px 50px;
所以這里我們可以給它一個定位值： - <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>CSS Sprites</title>
- <style>
- * { padding: 0; margin: 0; }
-
- /* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
- body {
- height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .sprite {
- /* 寬高要設置的和圖標一樣大或者稍微大一點點 */
- width: 20px;
- height: 18px;
-
- /* 背景圖地址設置為雪碧圖的位置 */
- background-image: url(http://img.mukewang.com/wiki/5ed9bc1809824eef00180038.jpg);
-
- /* 禁止背景圖重復 */
- background-repeat: no-repeat;
-
- /* 令背景圖顯示在正確的位置 */
- background-position: top;
-
- /* 邊框，便于對比背景圖所在位置 */
- border: 1px solid black;
- }
- </style>
- </head>
- <body>
- <div class="sprite"></div>
- </body>
- </html>
運行結果：
3. 小結學會了背景圖片的定位就好像學會了一門魔法，用這個魔法可以隨意的控制Css Sprite的各項圖標。 但是這些都是靜態(tài)的，固定在哪個位置就是哪兒了，如果想讓它有一些交互效果的話還是需要動態(tài)的去更改背景圖的定位。 下一小節(jié)我們將模仿百度首頁的交互效果來教會大家如何動態(tài)更改定位。 | 
