首页 > > 网页制作 > css >

css雪碧技术的用法。

2018-06-24 01:27:39来源：未知阅读 ()

---恢复内容开始---

在目前前端开发阶段，页面会出现大量的小图片，服务器加载的时候比较吃力，怎么用一种办法把图片都合并到一张图片上呢？这就用到了css雪碧技术。

雪碧技术是雪碧团队开发，也有人叫它css精灵，是一种css图像合并技术，该方法的原理是将小图片和背景图片合并到一张图片上，然后利用css的背景定位爱显示需要显示的图片部分。

1.css雪碧的优点：减少加载页面图片时对服务器的请求次数提高页面的加载速度减少鼠标滑过的一些bug。

2.不足点：css雪碧技术的最大问题是内存使用。它影响浏览器的缩放功能拼图维护的时候比较麻烦使css的编写变得更加困难，css雪碧调用的图片不能被打印。

现在使用代码来更详细的介绍雪碧技术。

<div>
    <div></div>
</div>

这是简单的html的页面，在外层div就是我们的背景板，它里边的div就是要显示的图片大小，把背景图插入到最小的div里边并调试背景图的位置，如下代码：

先给小div来个id id="xiao".

#xiao{
    width:50px;
    height:50px;
    background: url("图片路径")no-repeat;
    background-position: 0 0 0 0;
}

当图片出现在我们的小div里的时候就停止调试。

背景图片可以反复使用效果杠杠滴。

---恢复内容结束---

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

热门词条

最新资讯

热门关注

热门标签