【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搭建ftp服务器

    1 # coding: utf-8 import os from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handler ...

  2. https握手失败案例(一)

      OkHttpClient okHttpClient = new OkHttpClient.Builder() .connectTimeout(15, TimeUnit.SECONDS) .read ...

  3. css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法

    方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...

  4. SQL 视图、事务

    假设看多个不同的表 select *from student ,score,course,teacher 有重复的    改为select student.Sno,sname,ssex,sbirthd ...

  5. How to install Eclipse?

    http://askubuntu.com/questions/26632/how-to-install-eclipse How to install Eclipse? up vote113down v ...

  6. 1898 ERROR nova.compute.manager

    2018-06-10 21:03:54.045 1898 ERROR nova.compute.manager [instance: 15a6c26f-b8af-4a3e-a3df-8552c16e0 ...

  7. iOS的设计备忘录/资源集合(新手快速开发)

    iOS的设计备忘录 随着iOS7更新,风格走上扁平化,大部分iOS设计师及程序员都需要对自己的软件做相关调整,尺寸.Icon.UI等等,我在这里总结一下相关资料,以及提供一些关于iOS7设计素材. 一 ...

  8. Gym - 101291C (很有意思的最短路)

    题意: 给出一张地图和机器人还有出口的位置,地图上面有障碍.然后给出UDLR上下左右四种指令,遇到障碍物或者越界的指令会忽略,剩下的继续执行. 只要到达出口就算找到出口,然后给你一串指令,让你修改指令 ...

  9. 屏蔽系统的Ctrl+c/x/v操作

    实现效果: 知识运用: KeyEventArgs类的Control, public bool Control {get;} //获取一个值 该值指示是否曾按下Ctrl键 KeyCode和Handled ...

  10. faster rcnn细节总结

    1.roi_pooling层是先利用spatial_scale将region proposal映射到feature map上,然后利用pooled_w.pooled_h分别将映射后的框的长度.宽度等分 ...