CSS Sprites的优缺点
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的优缺点的更多相关文章
- CSS Sprites优缺点
利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...
- CSS Sprites(CSS精灵) 的优缺点
CSS Sprites 的优点: 1.减少图片的字节 2.减少了网页的http请求,从而大大的提高了页面的性能 3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命 ...
- CSS Sprites的概念、原理、适用范围和优缺点
CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- Css Sprites 多张图片整合在一张图片上
CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...
- 神奇的CSS sprites,制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- 使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
随机推荐
- Leetcode(59)-Count Primes
题目: Description: Count the number of prime numbers less than a non-negative number, n. 思路: 题意:求小于给定非 ...
- javascript语言扩展:可迭代对象(3)
除了前2篇文章中描述的可迭代对象以外,在js语言扩展中的生成器对象,也可以作为可迭代对象. 这里用到一个新的关键字yield,该关键字在函数内部使用,用法和return类似,返回函数中的一个值:yie ...
- Java不走弯路教程(5.Client-Server模式(2)-Client)
5.Client-Server模式(2)-Client 在上一章,我们完成一个简单的数据库服务器,并在客户端用telnet方式成功进行通信. 本章将用Java实现客户端程序,来代替telnet. 先看 ...
- C++笔记十七:C语言中 “冒牌货”const和const符号表
在.c文件中有程序: int main() { int const a = 10; a=20; printf("a=%d\n",a); return 0; } 编译就知道C语言 ...
- JS(作用域和闭包)
1.对变量提升的理解 1.变量定义(上下文) 2.函数声明 2.说明 this 几种不同的使用场景 常见用法 1.作为构造函数执行 2.作为对象属性执行 3.作为普通函数执行(this === win ...
- DB2常见问题
15.1实例常见问题和诊断案例 1.实例无法启动问题 db2nodes.cfg文件,主要是为了数据库分区设计的.如果实例无法启动,要检查db2nodes.cfg,看配置是否正常.db2systm实例配 ...
- CAN数据格式-ASC
Vector工具录制的数据,一般有ASC和BLF两种格式,本文介绍ASC. 1. ASC定义 ASC(ASCII)即文本文件,数据已可视化的文本存储. 2.ASC查看 通常情况下,用记事本就可以打开. ...
- Java反射之修改常量值
1. 通过反射修改常量的值 package com.blueStarWei.invoke; import java.lang.reflect.Field; public class ModifyFin ...
- eclipse乱码
eclipse乱码:Windows >general >Workspace UTF-8Windows >general >Editors >Text Editors &g ...
- 菜鸟级Git GitHub创建仓库
菜鸟标准:知道pwd ,rm 命令是什么. 一.Git 是什么. git 是目前世界上最先进的分布式版本控制系统 二.SVN与Git 1.版本控制系统 SVN 是集中式版本控制系统,版本库是集中放在中 ...