在一个项目的开发过程中用到了css sprite，有这样一个需求：目标样式大小是32px * 23px大小的图片作为图标。 如图所示:
但是，给我的背景图片是这样的一张图，256px * 46px：
在我们的实例中,我们使用底部菜单大小32px * 23px.为了保证普通显屏设备的图像显示，在这个图像的基础上做了一半的缩小。
在最初的CSS样式中，background-position的属性值都不需要进行任何设置，因为他们的默认值都是“0”，如下所示：
.x-navbar [class^='x-icon-'] {background-image: url(img/icon_navbar_new_year.png);width: 32px;height: 23px;} 因此，最关键的问题是，我们怎么知道background-size属性值要设置为多少？
这里有一个公式：
高分辨率图像宽度 / 目标图像宽度 = X
原始Sprites图像宽度 / x = background-size的宽度值
我们高分辨率下的图标是256px x 46px;
我们目标图像的宽度是“64px”；
我们Sprites图像的总宽度是“256px”
根据前面的公式 可以得知
64/32 = 2
256/2 = 128
最后的一件事情。我们只计算了背景图像的宽度值，为了确保背景图像缩放比例正常，我们将“height”值设置为“auto”。当然你也可以设置相的的值（设置background-sizer的宽度为auto，高度为具体值），但我发现设置宽度会比较容易。
.x-navbar [class^='x-icon-'] { background-size: 128px auto;}然后就是根据图片的位置坐标进行显示了：
.x-icon-shouye {background-position: 0 0;}.x-icon-dingdan {background-position: -32px 0;}.x-icon-gouwuche {background-position: -64px 0;}.x-icon-gengduo {background-position: -96px 0;}这样就实现了图中的效果了！
收藏
收藏
收藏
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
0
33
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
