CSS雪碧图

     https://juejin.im/post/58eb062861ff4b006b576d9c 

     CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

       基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。

       优点:①减少加载网页图片时对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。方便在任何位置使用,这样不同位置的请求只需要调用一个图片。(因为多个图片需要向服务器请求多次)

②提高页面的加载速度   ③减少鼠标滑过的一些bug

     缺点:①CSS雪碧的最大问题是内存使用    ②影响浏览器的缩放功能   ③拼图维护比较麻烦   ④使CSS的编写变得困难


   注意:排列图片的时候要注意各个图片之间留点空隙,不然使用的时候,会相互覆盖。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值