【08】css sprite是什么?有什么优缺点?


概念:将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点:

  1. 减少HTTP请求数,极大地提高页面加载速度。
  2. 增加图片信息重复度,提高压缩比,减少图片大小。
  3. 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现。

缺点:

  1. 图片合并麻烦。
  2. 维护麻烦,修改一个图片可能需要从新布局整个图片,样式。


**

【08】css sprite是什么,有什么优缺点的更多相关文章

  1. 01. css sprite是什么,有什么优缺点?

    1.css sprite是什么,有什么优缺点? 通常被意译为“CSS图像拼合”或“CSS贴图定位” 1)CSS Sprites的优点 利用CSS Sprites能很好地减少网页的http请求,从而大大 ...

  2. CSS Sprite的优缺点分析

    目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...

  3. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  4. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  5. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  6. HTML CSS SPRITE 工具

    推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV

  7. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  8. CSS雪碧,即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  9. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

随机推荐

  1. python学习之列表元组,字典

    list:元素性质可以不一致,元素还可以是list,可类似数组方法进行索引(也可以用负数索引,-1表示最后一个),可用.append('')进行动态增加,可用pop()删除最后一个或者pop(i)删除 ...

  2. python语法:

    1 #开始注释,‘’‘  ‘’’可以看做是文本字符串也可以看做是块注释:”:“开始后的缩进视为一个代码块类似{}:缩进没有规定,但一般4个空格,注意:粘贴复制代码一定要检查缩进:大小写敏感: 2 数据 ...

  3. shell脚本解析json文件

    安装jq扩展 下载:jq 根据自己系统下载对应的文件 cp jq-linux64 /usr/bin cd /usr/bin mv jq-linux64 jq chmod +x jq 使用方法 假设有个 ...

  4. DDX_Text详细用法

    void AFXAPI DDX_Text( CDataExchange* pDX, int nIDC, BYTE& value ); void AFXAPI DDX_Text( CDataEx ...

  5. arcgis【0基础 】【1】 中如何添加MXD

    1,第一种方法 MapControl  直接添加 if (!axMapControl1.CheckMxFile(FileName)) { MessageBox.Show("文件不合法&quo ...

  6. 死磕 java并发包之AtomicStampedReference源码分析(ABA问题详解)

    问题 (1)什么是ABA? (2)ABA的危害? (3)ABA的解决方法? (4)AtomicStampedReference是什么? (5)AtomicStampedReference是怎么解决AB ...

  7. PaaS优点与限制(3)

    PaaS优点与限制(3) PaaS学习笔记目录 PaaS基础学习(1) 在PaaS上开发Web.移动应用(2) PaaS优点与限制(3) 13. PaaS的核心服务 核心服务是指提供数据存储.SQl. ...

  8. Azure 项目构建 – 部署 Jenkins 服务器以实现持续集成(CI)

    通过完整流程详细介绍了如何通过 Azure 虚拟机.虚拟网络等服务在 Azure 平台上快速搭建 Jenkins 服务器. 此系列的全部课程 https://school.azure.cn/curri ...

  9. spring_boot入门

    核心: 控制反转(Inversion of Control-IOC)和依赖注入(Dependency Injection-DI) Spring中两者是相同的, 控制反转是用依赖注入实现的. 这里, 依 ...

  10. ping 不通。无法访问目标主机

    台式机 使用无线网卡  又登录了VPN 有时候访问不了局域网内的主机 解决方案  添加路由即可 window+R 打开运行 输入cmd  然后输入 route add 10.16.1.89 10.13 ...