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

首頁 慕課教程 雪碧圖入門教程 雪碧圖入門教程 雪碧圖尺寸不吻合時(shí)怎么辦？
手撕紅黑樹 · 更新于 2020-11-11

1. 當(dāng)有一個(gè)不吻合頁面元素的尺寸時(shí)

有時(shí)候圖片并不都是這么完美的適合你所需要的場景，比如美工給了一套比較大的雪碧圖：

圖片描述

實(shí)際上你并不需要這么大的圖標(biāo)，比如你需要圖標(biāo)的地方大概是55px * 50px：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
	  /* 清除默認(rèn)樣式 */
      * { padding: 0; margin: 0; }
      
      /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無視 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 設(shè)置寬高和邊框 */
        width: 55px;
        height: 50px;
        border: 1px solid black;

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

        /* 令背景圖顯示在正確的位置 */
        background-position: left bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

圖片描述

可以看出來此時(shí)由于圖標(biāo)遠(yuǎn)比盒子大，所以只顯示出了一個(gè)角，正所謂小荷才露尖尖角。

2. 解決方案

聰明的同學(xué)早就猜到了我們肯定有一個(gè)能夠控制背景圖大小的語法：

background-size：圖片尺寸;

  • 圖片尺寸可以是cover或contain這種關(guān)鍵字
  • 也可以是具體的寬高，如：background-size: 100px 50px;
  • 還可以是百分比，如：background-size: 100% 50%;

此時(shí)我們需要把背景圖的大小調(diào)到一個(gè)恰好能夠適應(yīng)盒子寬高的這么一個(gè)數(shù)值：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
      /* 清除默認(rèn)樣式 */
      * { padding: 0; margin: 0; }
      
      /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無視 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 設(shè)置寬高和邊框 */
        width: 55px;
        height: 50px;
        border: 1px solid black;

        /* 背景圖地址設(shè)置為雪碧圖的位置 */
        background-image: url('http://img.mukewang.com/wiki/5ed9a97108da9a2e04440371.jpg');
        
        /* 背景圖尺寸 */
        background-size: 205px 170px;

        /* 令背景圖顯示在正確的位置 */
        background-position: left bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

于是就可以把圖標(biāo)完美的呈現(xiàn)出來了：

圖片描述

如果雪碧圖過大可以調(diào)小背景尺寸，反之亦然。

3. 條形圖可以使用的語法

假如雪碧圖上面所有的圖標(biāo)都一樣大的話，建議做成條形圖：

圖片描述

因?yàn)闂l形圖可以有個(gè)簡便的方法：

background-size: cover;

  • cover的意思就是用寬高最小的那部分(上圖就是高比較小)恰好能填充滿整個(gè)背景區(qū)域。
實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
      /* 清除默認(rèn)樣式 */
      * { padding: 0; margin: 0; }
      
      /* 這段代碼是為了居中顯示，不是重點(diǎn)，看不懂的話可以無視 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 設(shè)置寬高和邊框 */
        width: 55px;
        height: 52px;
        border: 1px solid black;

        /* 背景圖地址設(shè)置為雪碧圖的位置 */
        background-image: url('http:////img.mukewang.com/wiki/5ed9ca5a0973e0d804450108.jpg');
        
        /* 背景圖尺寸 */
        background-size: cover;

        /* 令背景圖顯示在正確的位置 */
        background-position: left;
      }
  	</style>
  </head>
	<body>
    <div class="sprite"></div>
  </body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

圖片描述

可以看到結(jié)果幾乎是一樣的，但是這種方式就不用我們一點(diǎn)點(diǎn)的去調(diào)尺寸，看究竟是哪個(gè)尺寸最合適。而且在調(diào)試位置的時(shí)候我們只需要關(guān)心一個(gè)方向的位置就可以了，方便了許多。

4. 小結(jié)

本小節(jié)我們學(xué)習(xí)了如何改變背景圖片的尺寸，學(xué)會了這些基礎(chǔ)的CSS用法，你就已經(jīng)可以在網(wǎng)頁中使用雪碧圖來顯示靜態(tài)圖案了。

但我相信你肯定不會滿足于靜態(tài)這兩個(gè)字，那么接下來就一起來學(xué)習(xí)一下動畫的知識吧！