精灵图（雪碧图）

最新推荐文章于 2022-06-13 20:24:22 发布

Mr._Dang

最新推荐文章于 2022-06-13 20:24:22 发布

阅读量117

点赞数 1

分类专栏：小白基础文章标签： html5 css

本文链接：https://blog.csdn.net/m0_55832273/article/details/115287365

版权

小白基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

精灵图 css sprite

1.概念：

css sprite也叫精灵图雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有的零星图片集合到一张大图中。这样一来，当访问该页面时，就由原来的多次请求变为一次请求。客户端每显示一张图片都会想服务器发送一次请求，图片越多请求越多，延迟的可能性就越大，同时对服务器会造成压力。所以页面中如果有多个icon（小图标）时，推荐使用精灵图。

2.优点：

减少网页的http请求，从而提升网页的性能。
减少图片的字节。

3.用法：

需要一个设置好宽高的容器。
通过background-img引入背景图。
通过background-position将背景图移动到需要的位置。

例：

  <style>
    .box{
      width: 600px;
      height: 470px;
      margin: 100px auto;
      border: 1px solid;
      background-image: url("img/pkq.png");
      background-position: -1135px -600px;
    }
  </style>
</head>
<body>
  <div class="box">
  </div>

运行结果

Mr._Dang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精灵图（雪碧图）

精灵图 css sprite1.概念：css sprite也叫精灵图雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有的零星图片集合到一张大图中。这样一来，当访问该页面时，就由原来的多次请求变为一次请求。客户端每显示一张图片都会想服务器发送一次请求，图片越多请求越多，延迟的可能性就越大，同时对服务器会造成压力。所以页面中如果有多个icon（小图标）时，推荐使用精灵图。2.优点：减少网页的http请求，从而提升网页的性能。减少图片的字节。3.用法：需要一个设置
复制链接

扫一扫

专栏目录