推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV…

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视…

CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{background:url(img.png) no-repeat;} .Lighthouse{height:768px;width:1024px;background-position:0 0;} .Koala{height:768px;width:1024px;background-position:0 -768px…

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的.…

目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被大量网站使用,包括使用了大型 sprite 的 Amazon . 但是这些被广泛热议的好处真的是值得的吗?设计师们是否在没有全面考虑到所有情况的情况下,在盲目地使用这个技术呢?设计师们是不是过于关注 CSS sprite 的流行,而忽略了其它应该仔细斟酌的因素了呢? 这篇文章会讨论下使用 CSS s…

css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网…

什么是CSS Sprite ? 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON,栏目背景啊,图片按钮啊等都有会有规则的合并一张背景图,然后用background-position来实现背景图片的定位,他们为什么要花 费一些时间来合并这些CSS背景图片呢,CSS中用一张背景图做页面的技术到底有什么优势呢?   通常我们把它叫做CSS图像拼合技术,当然还有人把CSS Sprites叫做”CSS贴图定位”.     使用CS…

前言 background-size:规定背景图片的尺寸.为CSS3属性.so...万恶的ie浏览器,此刻的内心一定是崩溃的!说实话,作为一个前端的coder,面对CSS3如此多的炫酷效果,我不能用起来,还要求我兼容ie8及以下,我一定放弃维护多年的淑女形象,拿起刀!!!干什么,你懂的!当然,我大天朝的XX网站以及领导的审美除外!毕竟,我还是一朵需要祖国的阳光沐浴而茁长成长的老花朵!言归正传,聊一聊今天的主题. background-size CSS3属性.用法主要有下面4种. length 设…

1. 什么是CSS Sprite 将一些碎小的图片拼接为一张大点的图片来使用,目的是为了减少浏览器的http请求次数以提高网页的加载速度.每次请求图片都需要跟服务器建立一次连接,并且浏览器的最大并发请求数是有限制的.使用雪碧图并不能减少传送的数据的总量,但可以通过节省掉一部分建立.关闭连接的时间来加快网页的加载速度. 2. 如何使用 2.1 怎么得到雪碧图? ※ 直接手动拼接,只要可以将需要用到的小图片拼在一张图片上即可,当然,拼接应该尽量遵循的原则: 尽量让这张图片以后可维护: 在保证可维护性…