CSS实现多个图标集合到⼀张图⽚最近在整理资料，⾸先想起的就是这个图标多合⼀。
当初在仿做华为商城时，发现有张图⽚集合了页⾯上部分图标，才发现图标可以这样操作。
icon图标库
⾸先是原图，
实现效果，
CSS代码，以第⼆个为例：
label{
display: inline-block;
width: 47px;
height: 47px;
background: url(../img/icon.png) -94px -151px no-repeat;
}
实现思路：
1. ⾸先定义外框尺⼨，
2. 然后给它设置背景图⽚——background-image：url(../img/icon.png);
3. 接着通过像素定位——background-position: -94px -151px;
4. 最后设置背景图像不重复——background-repeat: no-repeat;
简写为：background: url(../img/icon.png) -94px -151px no-repeat;
这就实现图标多合⼀，很简单。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。