CSS-sprite雪碧图&精灵图

王十四兄

已于 2023-01-02 14:23:11 修改

阅读量403

点赞数 1

分类专栏： css 文章标签： css 前端 html web css3

于 2022-11-17 19:20:37 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127909639

版权

css 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

文章目录

雪碧图(精灵图)

雪碧图(精灵图)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .btn:link {
        /*将a转换为块元素*/
        display: block;
        /*设置宽高*/
        width: 93px;
        height: 29px;
        /*设置背景图片*/
        background-image: url(img/btn/btn.png);
        /*设置背景颜色不重复*/
        background-repeat: no-repeat;
      }
      .btn:hover {
        /*
          * 当是hover状态时，希望图片可以向左移动
          */
        background-position: -93px 0;
      }
      .btn:active {
      /*
        * 当是active状态时，希望图片可以再向左移动
        */
        background-position: -186px 0;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个超链接 -->
    <a class="btn" href="#"></a>
  </body>
</html>

link状态:
请添加图片描述

hover状态：

请添加图片描述

active状态：

请添加图片描述

1. 问题说明

做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验。

2. 产生闪烁问题的原因：

背景图片时以为外部资源的形式加载进网页的，浏览器没加载一个外部资源就需要单独的发送一次请求，
- 但是我们的外部资源不是同时加载的，浏览器只有在资源被使用的时候才回去加载资源
我们这个练习，一上来浏览器只会加载 link.png 由于 hover 和 active 状态没有马上触发，
- 所以 hover.png 和 active.png 并不是立即加载的
当 hover 被触发时，浏览器才去加载 hover.png
当 active 被触发时，浏览器才去加载 active.png

由于加载图片需要一定的时间，所以在加载和显示的过程中会有一段时间背景图片无法显示，导致出现闪烁的情况

3. sprite雪碧图(精灵图)说明

为了解决该问题，我们可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后通过 background-position 来切换要显示的图片的位置，这种技术叫做图片整合技术，(CSS-Sprite)
优点
- 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高了访问的效率，提高了用户的体验。
- 将多个图片整合为一张图片，减小了图片的总大小，提高了请求的速度，增加了用户体验

4. 利用雪碧图(精灵图)的练习

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 129px;
				height: 45px;
				background-image: url(img/amazon-sprite_.png);
			}
			.box2{
				width: 42px;
				height: 30px;
				background-image: url(img/amazon-sprite_.png);
				/*
				 * 设置偏移量
				 */
				background-position: -58px -338px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>