码迷,mamicode.com
首页 > Web开发 > 详细

css精灵图

时间:2020-08-19 19:17:27      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:网页   网址   属性   加载   vsp   nbsp   图标   需要   image   

为什么要用精灵图?

  1. 在网页中引入图片,src的属性值是一个网址,会请求数据,需要时间
  2. 如何去减轻服务器压力,减少加载图片的时间
    1.  图片的懒加载
    2.  精灵图

CSS精灵图定义

        1. CSS sprites
        2. 多个小图标放在一张图片上,然后通过背景方位去展示不同的小图标
使用
         background-image: url(images/img_navsprites.gif);
         background-position: -46px 0;
优点
  有效地减少服务器接受和发送请求的次数
         提高页面的加载速度

css精灵图

标签:网页   网址   属性   加载   vsp   nbsp   图标   需要   image   

原文地址:https://www.cnblogs.com/hjcby/p/13514664.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!