CSS Sprites
时间:2019-02-16
本文章向大家介绍CSS Sprites,主要包括CSS Sprites使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.简介
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中, 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。
2.优点
(1)CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
(2)CSS Sprites能减少图片的字节;
(3)CSS Sprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
(4)CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
3.缺点
(1)图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
(2)图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
(3)图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
(4)可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
- Android查缺补漏(View篇)--事件分发机制
- Android查缺补漏(View篇)--自定义View利器Canvas和Paint详解
- Android查缺补漏(View篇)--自定义 View 的基本流程
- CVPR2018: Unsupervised Cross-dataset Person Re-identification by Transfer Learning of Spatio-tempora
- 一个数据包消灭一台服务器的DNS漏洞
- java文件基本操作与实例
- 如何在Azkaban中安装HDFS插件以及与CDH集成
- CVE-2017-5123 漏洞利用全攻略
- sqlmap被ban了ip怎么办
- 毫秒级检测!你见过带GPU的树莓派吗?
- 达观数据对AngularJS技术的思考与实践
- hadoop配置文件
- 推荐一款src自动化扫描和收集的工具
- 蓝桥杯:兰顿蚂蚁
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- C#设备处理类操作
- x509数字证书导入-然后删除自身
- winform总结4> 工欲善其事,必先利其器之xml校验
- 如何利用SNMP实现网络攻击缓解?
- winform总结5> winform程序开发注意事项
- mvc文件上传支持批量上传,拖拽以及预览,文件内容校验
- .net Core 1.0.1 下的Web框架的的搭建过程step by step
- 蓝牙芯片----BK34341开发笔记------快速入门(2)
- .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
- 蓝牙芯片----BK3431开发笔记------基本外部驱动应用(3)
- .net core 利用中间件处理常见的网站功能 包括 session、routers、重定向、重写和文件下载
- 蓝牙芯片----BK3431开发笔记------RW stack中添加自定义服务教程(4)
- 图像简单处理
- 蓝牙---BLE GATT介绍
- Access数据库密码破解 C#