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