CSS图片唯一化是一种将多个图片转化为一张图片的技术,从而达到减少网络请求和加速页面加载的目的。通过CSS的background-image属性,可以将原本分散的小图片整合为一张大图片,称为雪碧图。
.sprite { background-image: url('sprite.png'); } .icon-message { background-position: -10px -10px; width: 20px; height: 20px; } .icon-user { background-position: -40px -10px; width: 20px; height: 20px; }
在上述代码中,.sprite 是整张雪碧图的 CSS 类,其中包含多个图片。.icon-message 和 .icon-user 则是分别代表两个小图标,通过 background-position 属性定位在雪碧图上,并设置宽度和高度来剪裁需要的部分。
通过CSS图片唯一化,除了极大地减少了网络请求,还可以有效地提高页面的显示速度和用户体验。