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命名,方便维护。欢迎大家尝试使用。