html中精灵图片路径,css中精灵图是什么意思？
css中精灵图是什么意思？有什么用？下面本篇文章就来给大家介绍一下CSS 精灵图。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
css中精灵图是什么意思？
css精灵图(sprite)直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。
其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
怎么使用css精灵图(sprite)？
css精灵图(sprite)其实就是通过将多个图片融合到一张图片文件中，使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非标签。
在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。
使用精灵图的优点
1、减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
2、提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。
单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
3、减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
更多前端开发知识，请查阅 HTML中文网 ！！
html中精灵图片路径,css中精灵图是什么意思？相关推荐
- vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .all_bg { background: url(../imag ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
- css禁止图片保存,CSS中的图片保存方法
"css中的图片"指的就是镶在CSS样式表中的图片.在我们用在浏览器保存网页时,很多时候,下载网页里的图片都下载不到,这样的话就会使网页非常不美观.所以,今天小编就给大家介绍集中保 ...
- ASP.NET中的图片路径问题
ASP.NET中的图片路径问题,相信大家都遇到过,而且很烦.比如,我们的图片路径是在根目录\images\下,在主页面我们想用里面的图片,在用户控件中我们也想用那个目录下的图片,而用户控件往往我们会把 ...
- mysql 字符串替换：处理历史稿件中的图片路径
REPLACE字符串替换函数 REPLACE(str,from_str,to_str) 示例: select REPLACE('123abcd89', 'abcd', '4567'); 输出结果: 1 ...
- 利用MySQL语句批量替换指定wordpress文章中的图片路径
天花了很多时间将SAE服务器中的图片下载到本地,然后删掉,但是有一个问题就是,所有文章中的图片路径还是以前的,没有根据域名来.导致下午某些时间段图片都是无法显示的,后来想到用MySQL直接批量替换,执 ...
- 新手零基础：飞桨代码中关于图片路径读取和资源解压报错
#飞桨代码中关于图片路径读取和资源解压报错 1.路径读取 在进行路径图片读取时,不同版本的python的os模块在路径拼接时会报错,一般情况下os.path.join(path,name),是可以将路 ...
- php img本地图片路径,php 替换文章中的图片路径,下载图片到本地服务器的方法
php 替换文章中的图片路径,下载图片到本地服务器 /** * 获取替换文章中的图片路径 * @param string $xstr 内容 * @param string $oriweb 网址 * @ ...
- 浏览器访问数据库中的图片路径
今天遇到一个小问题,就是启动服务器后,怎么提取数据库中图片路径,在浏览器地址栏中直接能够显示图片.我们知道,我们无法直接访问数据库中的图片,只能在项目启动后,通过服务器来显示图片地址. 直接上例子: ...
最新文章
- linux tomcat apr安装,Linux下Tomcat8.0.44配置使用Apr的方法
- 【转】Python 简介
- Java 设置文件只读
- 干货 | YOLOv5在建筑工地中安全帽佩戴检测的应用
- ubuntu install opencv
- 聊天室显示在线人数和已上线人数
- 【鸿蒙热】下的冷思考
- springmvc中常见的简单的文件上传和下载
- 好嗨游戏：20款最好玩的运动游戏：足球、篮球、网球等等（上）
- Large scale evolutionary optimization using cooperative coevolution
- 十万，百万，千万，快狗打车架构是怎么演进的？
- 美丽离岛兰屿印象图集
- Win10移除右键无用的菜单选项--注册表的自定义管理
- 让理科生沉默，让文科生落泪的题
- 目标检测 --- Anchor的生成
- java executor 源码_Java线程池ThreadPoolExecutor深度探索及源码解析
- ff新推荐弹窗怎么彻底删除---解决方案
- 手把手ADpcb制版过程（AD17入门篇）
- PHP项目上传到华为云服务器,php项目上传到云服务器
- 送给懂得珍惜的朋友们