Css Sprite尺寸不吻合时怎么办？
有时候并不都是这么完美的适合你所需要的场景，比如美工给了一套比较大的Css Sprite：
实际上你并不需要这么大的图标，比如你需要图标的地方大概是55px * 50px：
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 这段是为了居中，不是重点，看不懂的话可以无视 */
body {
height: vh;
display: flex;
align-items: center;
justify-content: center;
}
.sprite {
/* 设置宽高和边框 */
width: px;
height: px;
border: px solid black;
/* 背景图地址设置为Css Sprite的位置 */
background-image: url('http:http://www.w0.wiki/res/2021/11-02/11/a7b722d7adda9a2e08b3e0801ed4a173.jpg');
/* 背景图重复 */
background-repeat: no-repeat;
/* 令背景图在正确的位置 */
background-position: left bottom;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
运行结果：
可以看出来此时由于图标远比盒子大，所以只出了角，正所谓小荷才露尖尖角。
聪明的同学早就猜到了我们肯定有能够控制背景图大小的语法：
background-size：尺寸;
此时我们需要把背景图的大小调到恰好能够适应盒子宽高的这么数值：
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 这段是为了居中，不是重点，看不懂的话可以无视 */
body {
height: vh;
display: flex;
align-items: center;
justify-content: center;
}
.sprite {
/* 设置宽高和边框 */
width: px;
height: px;
border: px solid black;
/* 背景图地址设置为Css Sprite的位置 */
background-image: url('http:http://www.w0.wiki/res/2021/11-02/11/a7b722d7adda9a2e08b3e0801ed4a173.jpg');
/* 背景图尺寸 */
background-size: px px;
/* 令背景图在正确的位置 */
background-position: left bottom;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
于是就可以把图标完美的呈现出来了：
如果Css Sprite过大可以调小背景尺寸，反之亦然。
假如Css Sprite上面所有的图标都一样大的话，建议做成条形图：
因为条形图可以有个简便的：
background-size: cover;
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
<title>CSS Sprites</title>
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 这段是为了居中，不是重点，看不懂的话可以无视 */
body {
height: vh;
display: flex;
align-items: center;
justify-content: center;
}
.sprite {
/* 设置宽高和边框 */
width: px;
height: px;
border: px solid black;
/* 背景图地址设置为Css Sprite的位置 */
background-image: url('http://http://www.w0.wiki/res/2021/11-02/11/d8d2c9f58b73e0d8e61980b78eb9d818.jpg');
/* 背景图尺寸 */
background-size: cover;
/* 令背景图在正确的位置 */
background-position: left;
}
</style>
</head>
<body>
<div class="sprite"></div>
</body>
</html>
运行结果：
可以看到结果几乎是一样的，但是这种方式就不用我们一点点的去调尺寸，看究竟是哪个尺寸最合适。而且在调试位置的时候我们只需要关心方向的位置就可以了，方便了许多。
本小节我们学习了如何改变背景的尺寸，学会了这些基础的CSS，你就已经可以在网页中使用Css Sprite来静态图案了。
但我相信你肯定不会满足于静态这两个字，那么接下来就一起来学习一下动画的知识吧！
602392714
清零编程群