css sprite讲解与使用实例
转自:http://www.manongjc.com/article/886.html
一、什么是css sprites
css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升。
css sprites是什么通俗解释:CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
二、适合与不适合CSS sprites拼合布局
1、适合:一般小图标素材
小的图标ico类素材,一般图标很小十多像素几十像素的宽度高度,这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数,但很快加载完又会释放。
2、不适合:大图大背景
大背景一般用于网页背景,拼合时,设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小,网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些,所以大图不推荐拼接拼合来使用css sprites背景定位布局。
3、sprites适合推荐小结
一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等CSS布局。
三、css sprites优势与缺点劣势判断选择
1、sprites优势:
若干小图标拼合成一张图后布局,减少http iis请求数,对于大战大流量网站来说隐形优势很显然的,从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵,使用CSS Sprites这样可以大大的提高了页面的性能,这是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因,同时也减少图片文件数目。
2、sprites缺点
在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景,如果留空间或拼合位置不合适,在布局时容易出现布局这个盒子对象时,设置背景出现拼合相邻图片,干扰图片的情况;
CSS Sprites在开发的时候比较麻烦,你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;
CSS Sprites在维护的时候比较麻烦,sprites是一般双刃剑,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐,而且重新算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情
由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。
3、推荐小结
由于拼接图片需要一定经验技巧(做实践即可快速掌握)、测量定位数值、修改不是那么灵活等原因,一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites,因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力,所以不是很推荐小站。但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用,这样比较值得。
四、css sprites实例示例教程
1、素材与要实现效果截图
2、sprites实例教程解释介绍
首先这些图标素材是放在同一张图片上(PS拼合),然后实现成列表类布局,列表每个前图标不同。使用css sprites实现此布局(其实使用background样式实现)。
首先此列表布局我们使用ul li列表布局,每个li站一行排版,对ul设置padding实现四周内容与边框一定间距效果,因为每个li前面图标不同,但此背景图片是拼合在一张图片上,所以这里做li里开始使用span标签实现这个不同图标效果,每个图标不同为了区别span所以对span设置不同class,不同class对应设置定位相应的图标。
3、实例教程准备
1)、初始化模板使用:为了兼容各大浏览器,仍然这里使用网站提供初始化模板,在此模板基础上修改设置符合本实例CSS样式。
2)、图标素材,这里直接为大家提供拼接好的图标素材图片一张,命名为“ico.png”,如下图,可直接另存为保存使用。
4、先布局出效果,再css sprites设置不同背景图标样式
html代码:
<ul class="Sprites">
<li><span class="a1"></span><a href="#">WORD文章标题</a></li>
<li><span class="a2"></span><a href="#">PPT内容标题</a></li>
<li><span class="a3"></span><a href="#">Excel内容标题</a></li>
<li><span class="a4"></span><a href="#">PDF内容标题</a></li>
<li><span class="a5"></span><a href="#">文本文档标题</a></li>
</ul>
css代码:
ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;
overflow:hidden;background:url(ico.png) no-repeat}
ul.Sprites li a{ padding-left:5px}
效果截图
css sprites关键代码与解释
首先对ul.Sprites li span引入背景
ul.Sprites li span{ background:url(ico.png) no-repeat} 给span设置css背景图片。
再分别对不同span class设置对于图标背景定位具体值
ul.Sprites li span.a1{ background-position: -62px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”62px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a2{ background-position: -86px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”86px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a3{ background-position: -110px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”110px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a4{ background-position: -133px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”133px,向上“拖动”32px开始显示此背景图标
ul.Sprites li span.a5{ background-position: -158px -32px}设置背景图片作为对应盒子对象背景后向左“拖动”158px,向上“拖动”32px开始显示此背景图标
关键:背景background-position有两个数值,前一个代表靠左距离值(可为正可为负),第二个数值代表靠上距离值(可为正可为负)
背景background-position有两个数值可以为正可以为负,当为正数时,代表背景图片作为对象盒子背景图片时靠左和考上多少距离多少开始显示背景图片;当为负数时代表背景图片作为盒子对象背景图片,将背景图片拖动超出盒子对象左边多远,拖动超出盒子对象上边多远开始显示此背景图片。
CSS sprites技巧技术总结
CSS sprites其实就是对CSS背景background样式的扩展应用,以前设置背景background-position常见为正数值,设置背景靠左靠上距离多少像素开始显示图片,为负数值后,是将图片拖离左边上边多少像素开始显示图片,下载本案例多次修改修改数值,观察观察能找到规律很快就会作为此技巧,同时学会PS切片工具获取距离值。
css sprite讲解与使用实例的更多相关文章
- css sprite实例
css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...
- CSS Sprite、CSS雪碧图应用实例
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...
- css 伪类选择器:checked实例讲解
css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...
- Css Sprite(雪碧图、精灵图)<图像拼合技术>
一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...
- 利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
- CSS Sprite初探之原理、使用
CSS Sprite简介: 利用CSS Sprites能很好地减少了网页的http请求次数,从而大大的提高了页面的性能,节省时间和带宽.CSS Sprites在国内很多人叫css精灵, 是一种网页图片 ...
- css sprite,css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- css sprite 调整大张图片中小图标的大小
直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...
随机推荐
- at android.widget.AbsListView$RecycleBin.addScrapView(AbsListView.java:)
错误提示 错误原因 參考链接 错误提示: at android.widget.AbsListView$RecycleBin.addScrapView(AbsListView.java:) 在Andro ...
- Spring学习【Spring概述】
从本文開始,我们就要一起学习Spring框架,首先不得不说Spring框架是一个优秀的开源框架. 当中採用IoC原理实现的基于Java Beans的配置管理和AOP的思想都是非常值得学习与使用的.以下 ...
- jsp表达式
能够在"<%="和"%>"之间插入一个表达式(注意:不可插入语句. "<%="是一个完整的符号,"<%&q ...
- python--多种程序分析(2)
1.文件操作有哪些模式?请简述各模式的作用 r模式只读 w模式只写 a模式只添加 r+可读可写 w+可写可读 a+可读可添加 rb 二进制只读 wb 二进制只写 ab 二进制添加 ...
- Mac OS command line TestNG - “Cannot find class in classpath” error
直接eclipse执行.xml文件可以正确执行 在mac下执行却总报错: [TestNG] [Error] Cannot find class in classpath 最后解决办法,classpat ...
- 问题 “cell 出栈 selectBox 已选的图标,被释放掉,再次进入屏幕时,没有了已选图标 ” 解决方案
如何 去解决 列表里面的selectBox已选情况,在滑出屏幕后被清除的问题. 我来在这里 详细说明一下, 在cell里面写一个方法,去专门修复滑出后,又滑进来 图标被冲刷掉的cell. 在 ...
- 【BZOJ4293】[PA2015]Siano 线段树
[BZOJ4293][PA2015]Siano Description 农夫Byteasar买了一片n亩的土地,他要在这上面种草. 他在每一亩土地上都种植了一种独一无二的草,其中,第i亩土地的草每天会 ...
- cmake中的变量和命令的大小写
1 cmake中要特别注意命令和变量的大小写 2 cmake的内置命令是不区分大小写的 3 cmake内置变量是区分大小写的,或者干脆就说,cmake的所有变量都是区分大小写的 这就是变量和命令的不同 ...
- libcurl以get方式请求服务器端文件
static size_t callbackfunction(void *ptr, size_t size, size_t nmemb, void* userdata){ FILE* strea ...
- 简单老式Java对象 横切关注点 最小侵入性编程 声明式编程 避免强迫类继承和接口实现
Spring In Action data injection aspect-oriented programming Plain Old Java Object 依赖注入能让相互协作的软件组件保持松 ...