1. 當(dāng)有一個不吻合頁面元素的尺寸時有時候圖片并不都是這么完美的適合你所需要的場景，比如美工給了一套比較大的Css Sprite：
實際上你并不需要這么大的圖標(biāo)，比如你需要圖標(biāo)的地方大概是55px * 50px： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除默認(rèn)樣式 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
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>運行結(jié)果：
可以看出來此時由于圖標(biāo)遠(yuǎn)比盒子大，所以只顯示出了一個角，正所謂小荷才露尖尖角。 2. 解決方案聰明的同學(xué)早就猜到了我們肯定有一個能夠控制背景圖大小的語法：
此時我們需要把背景圖的大小調(diào)到一個恰好能夠適應(yīng)盒子寬高的這么一個數(shù)值： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除默認(rèn)樣式 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
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>于是就可以把圖標(biāo)完美的呈現(xiàn)出來了：
如果Css Sprite過大可以調(diào)小背景尺寸，反之亦然。 3. 條形圖可以使用的語法假如Css Sprite上面所有的圖標(biāo)都一樣大的話，建議做成條形圖：
因為條形圖可以有個簡便的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除默認(rèn)樣式 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
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>運行結(jié)果：
可以看到結(jié)果幾乎是一樣的，但是這種方式就不用我們一點點的去調(diào)尺寸，看究竟是哪個尺寸最合適。而且在調(diào)試位置的時候我們只需要關(guān)心一個方向的位置就可以了，方便了許多。 4. 小結(jié)本小節(jié)我們學(xué)習(xí)了如何改變背景圖片的尺寸，學(xué)會了這些基礎(chǔ)的CSS用法，你就已經(jīng)可以在網(wǎng)頁中使用Css Sprite來顯示靜態(tài)圖案了。 但我相信你肯定不會滿足于靜態(tài)這兩個字，那么接下來就一起來學(xué)習(xí)一下動畫的知識吧！ |
