CSS Sprites精灵图(雪碧图)
简介
- CSS精灵图,是一种网页图片应用处理方式。允许将一个页面涉及到的所有零星图片都包含到一张大图中
- 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。
优点
- 减少网页的http请求,从而提高页面的性能,这是其最大的优点,也是被广泛传播和应用的主要原因
- 能减少图片的字节
- 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,提高了网页制作效率。
- 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
缺点
- 图片合并麻烦:
- 图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
- 图片适应性差:
- 在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
- 图片定位繁琐:
- 开发时需要通过工具测量计算每个背景单元的精确位置。
- 可维护性差:
- 页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
CSS Sprites精灵图(雪碧图)的更多相关文章
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图)
一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...
- css之background-position属性实现雪碧图
什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分 ...
- css背景雪碧图等
1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...
- css雪碧图(css splite)
将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0
- compass做雪碧图
由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...
- Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...
- 图标字体 VS 雪碧图——图标字体应用实践
本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...
随机推荐
- 一文带你了解ANR(测试人员)
一.首先,了解一下什么是ANR ANR,是"Application Not Responding"的缩写,即"应用程序无响应".系统会向用户显示一个对话框,用户 ...
- http1.0 、http1.1和http2.0的区别
一.HTTP1.0 HTTP 1.1主要区别 1.1 长链接 HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支 ...
- Cypress系列(16)- 查找页面元素的基本方法
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前端页面代码 后面写的 Cypress ...
- Spring Cloud 系列之 Alibaba Nacos 注册中心(一)
前言 从本章节开始,我们学习 Spring Cloud Alibaba 相关微服务组件. Spring Cloud Alibaba 介绍 Spring Cloud Alibaba 致力于提供微服务开发 ...
- 玩转华为物联网IoTDA服务系列三-自动售货机销售分析场景示例
场景简介 通过收集自动售货机系统的销售数据,EI数据分析售货销量状况. 该场景主要描述的是设备可以通过MQTT协议与物联网平台进行交互,应用侧可以到物联网平台订阅设备侧变化的通知,用户可以在控制台或通 ...
- Java并发相关知识点梳理和研究
1. 知识点思维导图 (图比较大,可以右键在新窗口打开) 2. 经典的wait()/notify()/notifyAll()实现生产者/消费者编程范式深入分析 & synchronized 注 ...
- Oracle VM VirtualBox 连接 Centos7 minimal版
概述: 本博客是系列博客,主要讲述在Windows环境下安装虚拟机,在虚拟机中安装lunix系统,在lunix下安装docker,在docker中安装并使用常用的开发软件,比如tomcat.redis ...
- MySQL LIMIT:限制查询结果的记录条数
基本的语法格式如下: <LIMIT> [<位置偏移量>,] <行数> LIMIT 接受一个或两个数字参数.参数必须是一个整数常量.如果给定两个参数,第一个参数指定第 ...
- Linux下安装 Java
一.在线下载 Java JDK 环境 (1)搜索 yum 库有什么 JDK 版本 [root@localhost ~]# yum search java | grep jdk ldapjdk-java ...
- Day10-微信小程序实战-交友小程序-添加好友功能之创建并更新message信息
1.首先要在 添加好友 这个按钮上添加一个事件,也就是在detail.wxml的添加好友这个按钮的哪里,添加一个点击事件 handleAddFriend 并且添加好友还要考虑,现在是已登陆状态还是未登 ...