CSS Sprites在国内很多人叫css 精灵,是一种网页图片应用处理方式。就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样处理图片后,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

CSS Sprites的优点:

  1、减少图片的字节
     2、减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点。
     3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
     4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

CSS Sprites 的缺点:
     1、在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
    2、CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

CSS Sprites的优缺点的更多相关文章

  1. CSS Sprites优缺点

    利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...

  2. CSS Sprites(CSS精灵) 的优缺点

    CSS Sprites 的优点:     1.减少图片的字节     2.减少了网页的http请求,从而大大的提高了页面的性能     3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命 ...

  3. CSS Sprites的概念、原理、适用范围和优缺点

    CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...

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

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

  5. Css Sprites 多张图片整合在一张图片上

    CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...

  6. 神奇的CSS sprites,制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  7. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  8. 使用CSS sprites减少HTTP请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...

  9. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

随机推荐

  1. Python和shell中Base64编码使用那些事

    做开发第一个接触的编码方式就是Base64,当时是用url来传输一些参数,传输的两端会用Base64来编码和解码,保证数据不被url转义破坏. 下面是 维基百科 Base64 中的介绍,其实自己实现起 ...

  2. iOS和Android开发异同点(一)

    说到移动开发,目前主流平台有谷歌的android os 系统,苹果iOS系统,和微软主打的windows Phone OS 系统,至于目前为啥移动开发中,安卓和iOS比较受欢迎,者要看三家产品的历史由 ...

  3. ZooKeeper 会话超时

    1.会话概述 在ZooKeeper中,客户端和服务端建立连接后,会话随之建立,生成一个全局唯一的会话ID(Session ID).服务器和客户端之间维持的是一个长连接,在SESSION_TIMEOUT ...

  4. Apache Kafka简介与安装(一)

    介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计. 首先让我们看几个基本的消息系统术语: Kafka将消息以topic为单位进行归纳. 将向 ...

  5. C++笔记018:构造函数的调用规则

      原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 一.默认构造函数 两个特殊的构造函数 1.默认无参构造函数 当类中没有定义构造函数时,编译器默认提供一个无参构造函数,并且其函数体为空 ...

  6. azkaban报错记录

    问题信息:Failed to build job executor for job o2o_get_file_ftp1Job type 'command ' is unrecognized. Coul ...

  7. /usr/lib/uwsgi/plugins/python_plugin.so: cannot open shared object file: No such file or directory

    Django uwsgi部署方式下产生这个Bug,后来发现把uwsgi配置ini文件里面的 #plugins = python 把上面这句配置语句注释掉,uwsgi就可以运行了,当然,是正常可用运行状 ...

  8. Mac下的Bash配置文件冲突问题

    Mac下默认的Bash配置文件是~/.profile.有的软件安装时会生成~/.bash_profiel.有了这个文件.之前的.profiel就不会再被加载,需要手动把里面的文件内容转移到.bash_ ...

  9. ajax接收php返回得到一堆html代码

    ajax接收php返回得到一堆html代码 一.      错误代码: <font size='1'><table class='xdebug-error xe-notice' di ...

  10. jQuery匿名函数$(function(){ }

    搬运原地址:https://zhidao.baidu.com/question/473318430.html $(function(){ }实际上是匿名函数.这是JQuery的语法,$表示JQuery ...