【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. F. Bakkar In The Army 二分

    http://codeforces.com/gym/100283/problem/F 思路是二分第几行,二分出来的行是总和 >= n的,那么第k - 1行一定要选,那么再在第k行中二分那一列. ...

  2. 打包google浏览器插件到本地

    依次打开‘更多工具’--->'扩展程序',或者在google浏览器输入chrome://extensions/网址就可以打开已安装插件页面,在顶部选中‘开发者模式’后就会出现每个插件的ID,这个 ...

  3. zTree树插件动态加载

    需求: 由于项目中家谱图数据量超大,而一般加载方式是通过,页面加载时 zTree.init方法进行数据加载,将所有数据一次性加载到页面中.而在项目中家谱级别又非常广而深,成千上万级,因此一次加载,完全 ...

  4. h5旋转效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. WebService_Demo

    简述 使用IDEA开发webservice服务,从零开始一步一步指引你. 服务端开发 首先创建一个webservice项目,如下图 创建完项目后idea会帮我们创建一个类,helloword,我们把它 ...

  6. 前端之Html元素的分类

    一.html元素可分为三大类:块元素.内联元素.可变元素 1.块元素: 常见块状元素:div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedse ...

  7. AJPFX关于延迟加载的单例模式的安全问题解决

    请写一个延迟加载的单例模式?写懒汉式:当出现多线程访问时怎么解决?加同步,解决安全问题:效率高吗?不高:怎样解决?通过双重判断的形式解决.懒汉式:延迟加载方式.当多线程访问懒汉式时,因为懒汉式的方法内 ...

  8. 【转】Create Hello-JNI with Android Studio

    [转]Create Hello-JNI with Android Studio From:https://codelabs.developers.google.com/codelabs/android ...

  9. 关于&0xF0的一些认识

    首先,要明白0xF0转换成二进制是多少 ----- 1111 0000(0xF0相当于高四位保留,低四位置为0) 我们拿麻将的一万(0x01).一条(0x11).一筒(0x21) 一万的二进制原码   ...

  10. 允许Java App（applet）粘贴方法

    修改安全策略文件: "java.policy" JRE6的路径在:"C:\Program Files (x86)\Java\jre6\lib\security" ...