什么是雪碧图

雪碧图（sprites）将网页中能够用到的一些图片整合到一张图片中，再使用背景图片属性定位需要的图片内容。

这个是虚假的雪碧图

雪碧图用到的属性

width，height（容器宽度）
background-image
background-repeat（设置为no-repeat）
background-position（left，top的像素或百分比定位）进行背景定位
background-size（x，y像素或比例大小）一般是长宽等比例缩放
进行设置

雪碧图的优点

减少图片http请求，只需要进行一次http请求就能获取图片，提高页面性能
减小图片大小，一张合成雪碧图大小小于多张图片。

雪碧图的缺点

可维护性差。要让一张图片新增修改或减少部分内容比较麻烦。
图片体积较大时，可能会影响用户体验。需要加载完一整张图片才能对页面图片进行渲染，可能耗时较长。

前端女娲补天 CSS（五）什么是雪碧图相关推荐

CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
【前端小实战】百度新闻雪碧图及动画（CSS sprites）
文章目录前言 ~ 雪碧图一.页面效果展示二.代码实现解析三.完整代码前言 ~ 雪碧图雪碧图,英文原名叫 CSS sprites,其实就是融合了各种资源的图片,图片里面可能会有一个角色的 ...
前端工程师实战17：详解CSS背景图片、雪碧图
大家好,全套HTML和CSS入门与实战课程正在我的专栏<HTML与CSS入门与进阶>更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅! ...
CSS 背景图标（雪碧图、精灵图、iconfont）
目录雪碧图(精灵图) icon-font 雪碧图(精灵图) 特点: 一个网站有很多背景图(一般是系统UI图片, 不是用户自己上传的那种)时, 会多次向服务器发起请求, 造成服务器压力. 为了解决这个 ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
JAVA自动生成雪碧图sprites和样式CSS文件（包含原始图标CSS、雪碧图CSS）
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
雪碧图PHP,Webpack中雪碧图插件使用详解
背景在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
sprite（雪碧图，也叫精灵图）
1.css sprite 中文名为雪碧图,也叫精灵图,是基于background-image和background-position 实现的显示技术就是将一个有很多图标的图片,通过控制图片显示位置 ...

前端女娲补天 CSS（五）什么是雪碧图

什么是雪碧图

雪碧图用到的属性

雪碧图的优点

雪碧图的缺点

前端女娲补天 CSS（五）什么是雪碧图相关推荐

最新文章

热门文章

前端女娲补天 CSS（五） 什么是雪碧图

什么是雪碧图

雪碧图用到的属性

雪碧图的优点

雪碧图的缺点

前端女娲补天 CSS（五） 什么是雪碧图相关推荐

最新文章

热门文章

前端女娲补天 CSS（五）什么是雪碧图

前端女娲补天 CSS（五）什么是雪碧图相关推荐