web前端-html-css-雪碧图&精灵图(切换背景问题，闪烁原因，雪碧图说明，实例)

web前端-html-css-雪碧图&精灵图(切换背景问题，闪烁原因，雪碧图说明，实例)
文章目录
- 雪碧图(精灵图)
- 1. 问题说明
  2. 产生闪烁问题的原因：
  3. sprite雪碧图(精灵图)说明
  4. 利用雪碧图(精灵图)的练习
雪碧图(精灵图)
```
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
```
link状态:

hover状态：

active状态：

1. 问题说明
1. 做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
2. 这个闪烁会造成一次不佳的用户体验。
2. 产生闪烁问题的原因：
1. 背景图片时以为外部资源的形式加载进网页的，浏览器没加载一个外部资源就需要单独的发送一次请求，
  - 但是我们的外部资源不是同时加载的，浏览器只有在资源被使用的时候才回去加载资源
2. 我们这个练习，一上来浏览器只会加载 link.png 由于 hover 和 active 状态没有马上触发，
  - 所以 hover.png 和 active.png 并不是立即加载的
3. 当 hover 被触发时，浏览器才去加载 hover.png
4. 当 active 被触发时，浏览器才去加载 active.png
  
  由于加载图片需要一定的时间，所以在加载和显示的过程中会有一段时间背景图片无法显示，导致出现闪烁的情况
3. sprite雪碧图(精灵图)说明
1. 为了解决该问题，我们可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
2. 然后通过 background-position 来切换要显示的图片的位置，这种技术叫做图片整合技术，(CSS-Sprite)
3. 优点
  - 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高了访问的效率，提高了用户的体验。
  - 将多个图片整合为一张图片，减小了图片的总大小，提高了请求的速度，增加了用户体验
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
```
原雪碧图:

页面展示：
相关阅读:
谷歌浏览器如何设置和恢复纯黑界面
 腾讯云部署----DevOps
SpringBoot+vue开发记录（二）
2024年csdn最新最全的Postman接口测试： postman实现参数化
 VFP用上git来管理源代码，备份回滚，开发模式不影响正式版本，猫猫带你来入门
 STM32CubeMX环境安装（保姆级）
微服务框架 SpringCloud微服务架构 16 SpringAMQP 16.3 入门案例的消息接收
 C++之类和对象（下）
开启 Keep-Alive 可能会导致http 请求偶发失败
 【工作笔记】缓存里的几种模式
原文地址：https://blog.csdn.net/weixin_64933233/article/details/127909639

文章目录

雪碧图(精灵图)

1. 问题说明

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

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

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