简介

  • CSS精灵图,是一种网页图片应用处理方式。允许将一个页面涉及到的所有零星图片都包含到一张大图中
  • 利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位, 访问页面时避免图片载入缓慢的现象。

优点

  1. 减少网页的http请求,从而提高页面的性能,这是其最大的优点,也是被广泛传播和应用的主要原因
  2. 能减少图片的字节
  3. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,提高了网页制作效率。
  4. 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点

  1. 图片合并麻烦:

    • 图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
  2. 图片适应性差:
    • 在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
  3. 图片定位繁琐:
    • 开发时需要通过工具测量计算每个背景单元的精确位置。
  4. 可维护性差:
    • 页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。

CSS Sprites精灵图(雪碧图)的更多相关文章

  1. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  3. CSS入门(背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图)

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  4. css之background-position属性实现雪碧图

    什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分 ...

  5. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  6. css雪碧图(css splite)

    将很多小的背景图片放在一起,可以减少http请求. 这些图片通常是一类的. 所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间 0 = 0

  7. compass做雪碧图

    由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when dep ...

  8. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

  9. 图标字体 VS 雪碧图——图标字体应用实践

    本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...

随机推荐

  1. 一文带你了解ANR(测试人员)

    一.首先,了解一下什么是ANR ANR,是"Application Not Responding"的缩写,即"应用程序无响应".系统会向用户显示一个对话框,用户 ...

  2. http1.0 、http1.1和http2.0的区别

    一.HTTP1.0 HTTP 1.1主要区别       1.1 长链接             HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支 ...

  3. Cypress系列(16)- 查找页面元素的基本方法

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前端页面代码 后面写的 Cypress ...

  4. Spring Cloud 系列之 Alibaba Nacos 注册中心(一)

    前言 从本章节开始,我们学习 Spring Cloud Alibaba 相关微服务组件. Spring Cloud Alibaba 介绍 Spring Cloud Alibaba 致力于提供微服务开发 ...

  5. 玩转华为物联网IoTDA服务系列三-自动售货机销售分析场景示例

    场景简介 通过收集自动售货机系统的销售数据,EI数据分析售货销量状况. 该场景主要描述的是设备可以通过MQTT协议与物联网平台进行交互,应用侧可以到物联网平台订阅设备侧变化的通知,用户可以在控制台或通 ...

  6. Java并发相关知识点梳理和研究

    1. 知识点思维导图 (图比较大,可以右键在新窗口打开) 2. 经典的wait()/notify()/notifyAll()实现生产者/消费者编程范式深入分析 & synchronized 注 ...

  7. Oracle VM VirtualBox 连接 Centos7 minimal版

    概述: 本博客是系列博客,主要讲述在Windows环境下安装虚拟机,在虚拟机中安装lunix系统,在lunix下安装docker,在docker中安装并使用常用的开发软件,比如tomcat.redis ...

  8. MySQL LIMIT:限制查询结果的记录条数

    基本的语法格式如下: <LIMIT> [<位置偏移量>,] <行数> LIMIT 接受一个或两个数字参数.参数必须是一个整数常量.如果给定两个参数,第一个参数指定第 ...

  9. Linux下安装 Java

    一.在线下载 Java JDK 环境 (1)搜索 yum 库有什么 JDK 版本 [root@localhost ~]# yum search java | grep jdk ldapjdk-java ...

  10. Day10-微信小程序实战-交友小程序-添加好友功能之创建并更新message信息

    1.首先要在 添加好友 这个按钮上添加一个事件,也就是在detail.wxml的添加好友这个按钮的哪里,添加一个点击事件 handleAddFriend 并且添加好友还要考虑,现在是已登陆状态还是未登 ...