亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

手撕紅黑樹 · 更新于 2020-11-11

1. 背景圖定位

上一小節的代碼運行過后看似好像沒什么問題，那么我們來給它加上個邊框試試：
border
加上邊框后發現它其實是有點歪了，偏左上角一點，這是因為background-image屬性默認是定位在元素的左上角的。

2. 來看一下定義背景圖位置的語法怎么寫：

background-position: 你想要的位置;

  • 想要的位置一共可以填兩個值，第一個值代表橫向的位置，第二個值代表縱向位置，如果省略第二個值默認是居中的。
  • 你想要的位置可以是 top、center、bottom、left、right這種關鍵字，如：background-position: top right;
  • 也可以是百分比數值，如：background-position: 100% 50%;
  • 還可以是具體的數字單位，如：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>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：
sprite

3. 小結

學會了背景圖片的定位就好像學會了一門魔法，用這個魔法可以隨意的控制雪碧圖的各項圖標。

但是這些都是靜態的，固定在哪個位置就是哪兒了，如果想讓它有一些交互效果的話還是需要動態的去更改背景圖的定位。

下一小節我們將模仿百度首頁的交互效果來教會大家如何動態更改定位。