第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

1. 背景圖定位

上一小節(jié)的代碼運(yùn)行過后看似好像沒什么問題，那么我們來給它加上個邊框試試：
border
加上邊框后發(fā)現(xiàn)它其實(shí)是有點(diǎn)歪了，偏左上角一點(diǎn)，這是因?yàn)閎ackground-image屬性默認(rèn)是定位在元素的左上角的。

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

background-position: 你想要的位置;

  • 想要的位置一共可以填兩個值，第一個值代表橫向的位置，第二個值代表縱向位置，如果省略第二個值默認(rèn)是居中的。
  • 你想要的位置可以是 top、center、bottom、left、right這種關(guān)鍵字，如：background-position: top right;
  • 也可以是百分比數(shù)值，如：background-position: 100% 50%;
  • 還可以是具體的數(shù)字單位，如：background-position: 100px 50px;

所以這里我們可以給它一個定位值：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
      * { padding: 0; margin: 0; }
      
      /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無視 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 寬高要設(shè)置的和圖標(biāo)一樣大或者稍微大一點(diǎn)點(diǎn) */
        width: 20px;
        height: 18px;

        /* 背景圖地址設(shè)置為雪碧圖的位置 */
        background-image: url(http://img.mukewang.com/wiki/5ed9bc1809824eef00180038.jpg);
        
        /* 禁止背景圖重復(fù) */
        background-repeat: no-repeat;

        /* 令背景圖顯示在正確的位置 */
        background-position: top;

        /* 邊框，便于對比背景圖所在位置 */
        border: 1px solid black;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：
sprite

3. 小結(jié)

學(xué)會了背景圖片的定位就好像學(xué)會了一門魔法，用這個魔法可以隨意的控制雪碧圖的各項(xiàng)圖標(biāo)。

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

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