CSS中雪碧图CSS-Sprite的使用，解决图片闪烁问题

燕穗子博客

已于 2022-04-13 09:13:46 修改

阅读量517

点赞数 2

分类专栏： CSS 文章标签：开发语言 css vscode javascript java

于 2022-04-13 09:12:56 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124140005

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源

分别引入会导致的问题：

（1）切换图片时，会发现图片有一个非常快的闪烁，

（2）网站性能不好

解决的方法有很多，这里介绍雪碧图的解决方法，准备，开车了···

一、雪碧图的介绍

雪碧图官方名字叫图片整合技术（CSS-Sprite）

雪碧图的特点：

1、将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。

2 、将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度

二：雪碧图使用步骤（管中窥豹）

1:先确定要使用的图标

2:测量图标的大小

3:根据测量结果创建一个元素

4:将雪碧图设置为元素的背景

5：设置一个偏移量以显示正确的图片

三：代码演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .btn:link {
        /*将a转换为块元素*/
        display: block;
        /*设置宽高*/
        width: 200px;
        height: 500px;
        /*设置背景图片*/
        background-image: url("./img2/早中晚.webp");
        /*设置背景图片不重复*/
        background-repeat: no-repeat;
        background-position: -80px 0px;
      }

      .btn:hover {
        /*
				 * 当是hover状态时，希望图片可以向左移动
				 */
        background-position: -300px 0px;
      }

      .btn:active {
        /*
				 * 当是active状态时，希望图片再向左移动
				 */
        background-position: -500px 0px;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个超链接 -->
    <a class="btn" href="#"></a>
  </body>
</html>

燕穗子博客

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中雪碧图CSS-Sprite的使用，解决图片闪烁问题

背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源分别引入会导致的问题：（1）切换图片时，会发现图片有一个非常快的闪烁，（2）网站性能不好解决的方法有很多，这里介绍雪碧图的解决方法，准备，开车了···一、雪碧图的介绍—雪碧图官方名字叫图片整合技术（CSS-Sprite）—雪碧图的特点：1、将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多...
复制链接

扫一扫