亚洲国产精品人久久,亚洲va国产日韩欧美精品色婷婷,久久久久88色偷偷,免费人成黄页在线观看国际

17站長(zhǎng)網(wǎng)

Css Sprite教程

背景圖定位

1. 背景圖定位

上一小節(jié)的代碼運(yùn)行過后看似好像沒什么問題，那么我們來給它加上個(gè)邊框試試：

border

加上邊框后發(fā)現(xiàn)它其實(shí)是有點(diǎn)歪了，偏左上角一點(diǎn)，這是因?yàn)閎ackground-image屬性默認(rèn)是定位在元素的左上角的。

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

background-position: 你想要的位置;

  • 想要的位置一共可以填兩個(gè)值，第一個(gè)值代表橫向的位置，第二個(gè)值代表縱向位置，如果省略第二個(gè)值默認(rèn)是居中的。

  • 你想要的位置可以是 top、center、bottom、left、right這種關(guān)鍵字，如：background-position: top right;

  • 也可以是百分比數(shù)值，如：background-position: 100% 50%;

  • 還可以是具體的數(shù)字單位，如：background-position: 100px 50px;

所以這里我們可以給它一個(gè)定位值：

<!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;

        /* 邊框，便于對(duì)比背景圖所在位置 */
        border: 1px solid black;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

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

sprite

3. 小結(jié)

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

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

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

返回頂部