css图标都放在一个图片上

CSS中使用图标可以让页面看起来更加优美、有趣，但是如果每个图标都使用单独的图片，会导致页面加载速度慢，影响用户体验。

借助CSS sprite（CSS精灵），可以将多个图标都放在同一张图片上，减少HTTP请求，提高页面加载速度，同时也方便维护。

.icon{
    width: 30px;
    height: 30px;
    background: url(sprites.png) no-repeat;
}
.facebook{
    background-position: 0 0;
}
.twitter{
    background-position: -30px 0;
}
.reddit{
    background-position: -60px 0;
}
    

在上面的代码中，我们先定义了一个.icon类，宽高为30px，在一张名为sprites.png的图片中，用background属性进行定义背景，然后通过background-position来指定所需的图标位置。

通过CSS sprite的方式，可以将多个图标合并成一个文件，提高网页性能，规范CSS命名，方便维护。欢迎大家尝试使用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！