【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. 如何查找Oracle某列值相同的字段

    相关的sql语句如下 select xm_guidfrom T_NZYDKgroup by xm_guidhaving count (*)>1

  2. 获取文件的MD5码(C#)

    using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace Test ...

  3. Eclipse集成Maven环境(出现jar的解析或者缺失问题)(或者出现Invalid classpath publish/export dependency /common. Project entries not supported)的统一整理

    在正确配置完Maven,和Maven IntegrationFor Eclipse之后,新建了一个Maven Project 和一个Maven Module,发现新建的Module项目下的pom.xm ...

  4. 浅谈Hibernate中的三种数据状态

    Hibernate中的三种数据状态:临时.持久.游离 1.临时态(瞬时态) 不存在于session中,也不存在于数据库中的数据,被称为临时态. 数据库中没有数据与之对应,超过作用域会被JVM垃圾回收器 ...

  5. Ubuntu 16.04 not a com32r image

    安装Ubuntu16.04,出现题目中的错误,解决方法如下 重点:开机后按TAB键,在随后出现的命令行提示符中输入live 既可,之后的过程就是正常的过程了!

  6. Android Studio报错Unable to resolve dependency for ':app@release/compileClasspath':无法引用任何外部依赖的解决办法

    Android Studio 在引用外部依赖时,发现一直无法引用外部依赖.刚开始以为是墙的问题,尝试修改Gradle配置,未解决问题. 最终发现原来是在Android Sudio安装优化配置时,将Gr ...

  7. Yii2中多表关联查询(with、join、joinwith)

    表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer   (id  customer_name) 订单表Order         (id  order_name   custome ...

  8. jmeter并发定时器

    jmeter并发定时器

  9. openstack 存储节点按照报错Device /dev/sdb not found (or ignored by filtering).

    root@dell-PowerEdge-T30:~# pvcreate /dev/sdb  Device /dev/sdb not found (or ignored by filtering).首页 ...

  10. 微信程序开发系列教程(二)使用JavaScript给微信用户发送消息

    我之前的文章 微信程序开发系列教程(一)开发环境搭建 介绍了微信开发环境的搭建,这篇文章我们就来一步步开发一些具体的功能. 功能需求:当有微信用户关注了您的公众号之后,您用JavaScript发送一个 ...