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