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

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

分别引入会导致的问题：

（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>

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

三分钟学会如何使用css雪碧图（Sprite）
一. 先分析一下名字(有没有人跟我一开始一样疑惑为啥叫这名) Sprite 英文小精灵的意思,Sprite又叫小精灵图,恰好呢某绿瓶气泡水名也叫sprite,狠狠地撞名-_ ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
css中雪碧图(sprite)的使用及制作方法
雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
html雪碧图效果,html和css中雪碧图的使用
雪碧图:多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数,加快运行的速度. 例如要使用下面的雪碧图:需要用到background-position属性代码示例: #container ...
HTML、CSS中雪碧图的使用
雪碧图:多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数,加快运行的速度. 例如要使用下面的雪碧图:需要用到background-position属性代码示例: <!DOCTYP ...
在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
No.006 雪碧图CSS Sprite
雪碧图CSS Sprite 1. 名称由来 2. 使用目的 3. 实现注意 (以下所有内容仅用以记录学习过程中的个人理解,如有错误欢迎指出) 1. 名称由来为什么叫雪碧图呢?因为常喝的雪碧的英文名称 ...
css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...

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

一、雪碧图的介绍

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

三：代码演示

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

最新文章

热门文章