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

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

1. 當有一個不吻合頁面元素的尺寸時

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

圖片描述

實際上你并不需要這么大的圖標，比如你需要圖標的地方大概是55px * 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: 55px;
        height: 50px;
        border: 1px solid black;

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

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

運行結果：

圖片描述

可以看出來此時由于圖標遠比盒子大，所以只顯示出了一個角，正所謂小荷才露尖尖角。

2. 解決方案

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

background-size：圖片尺寸;

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

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

實例演示
預覽 復制
復制成功！
<!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: 55px;
        height: 50px;
        border: 1px solid black;

        /* 背景圖地址設置為雪碧圖的位置 */
        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>
運行案例 點擊 "運行案例" 可查看在線運行效果

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

圖片描述

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

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

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

圖片描述

因為條形圖可以有個簡便的方法：

background-size: cover;

  • cover的意思就是用寬高最小的那部分(上圖就是高比較小)恰好能填充滿整個背景區(qū)域。
實例演示
預覽 復制
復制成功！
<!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: 55px;
        height: 52px;
        border: 1px solid black;

        /* 背景圖地址設置為雪碧圖的位置 */
        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>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

圖片描述

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

4. 小結

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

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