CSS Sprites合并多个小图片 |
您所在的位置：网站首页 › spritecow › CSS Sprites合并多个小图片 |
|
这种方法看似繁琐，但却是非常有实用价值的。 首先，CSS Sprites 能较少 HTTP 请求次数。我们知道，HTTP 请求数对网站的工作性能有较大关联。如果背景图分开存放，每一次调用都会产生 HTTP 请求，一定程度上增加了服务器的负担。而单个背景图的设计方法，只需请求一次即可取回背景图片。很多大型网站，包括雅虎，新浪等，都采用了 CSS 其次，CSS Sprites 能防止背景图片延迟加载。有时在点击以图片作背景的按钮时会发现，鼠标悬停的时刻才会触发浏览器下载背景图片，这是非常差劲的用户体验。但如果将图片存放与单个文件，就能避免延迟加载。因为在打开网页的首次请求中，图片已经加载完毕。 然而，使用单个图片文件存放的方法会降低可维护性。而且图片的定位比较繁琐，缺乏灵活性。在雅虎开发小组的 YUI 总之，CSS Sprites 有利也有弊。在追求性能的前提下，CSS
网页中经常涉及到很多小图片，一般能达到几十个，如果每个小图片来一次http请求，请求个数多大几十个。使用css sprites技术服务器端只需要将一个包含所有小图片的图片发送过来，由客户端使用css的背景图片及背景图片位置属性来显示图片即可。如此一来大大减少了服务器端的压力。
如今css sprites技术已经被很多大型网站使用，使用火狐的firebug观察google搜索页面的请求，会发送服务器端返回如下图片，此图片中包含了搜索页面大部分图片 而google log的html源码为 Html代码 Google
其中logo对应css为
Html代码 1. #logo { 2. display: block; 3. height: 41px; 4. margin: 0; 5. overflow: hidden; 6. position: relative; 7. width: 114px; 8. } 9. #logo img { 10. background: none repeat scroll 0 0 #F5F5F5; 11. border: 0 none; 12. left: 0; 13. position: absolute; 14. top: -41px; 15. } #logo { display: block; height: 41px; margin: 0; overflow: hidden; position: relative; width: 114px; } #logo img { background: none repeat scroll 0 0 #F5F5F5; border: 0 none; left: 0; position: absolute; top: -41px; }
参考了如上代码，自己试了下 原图片包含四个小图标，每个小图标大小为9px*9px，即大图片大小为18px*18px，如下 需要的效果，及在html页面每一行显示一个小图标 css源码
Java代码 1. #plusImageButton { 2. display:block; 3. overflow:hidden; 4. position:relative; 5. width:9px; 6. height:9px; 7. margin:5px 5px 5px 5px; 8. } 9. #plusImageButton img{ 10. border:none; 11. position:absolute; 12. } #plusImageButton { display:block; overflow:hidden; position:relative; width:9px; height:9px; margin:5px 5px 5px 5px; } #plusImageButton img{ border:none; position:absolute; } 注意其中plusImageButton的width、height为小图片的长和宽
html源码：
Html代码 Html代码
注意其中img的width为大图片的长，height为大图片的宽。style中的left和top是为了控制显示哪个小图片，位置相对于大图片的左上角顶点而言
参考： http://www.mangguo.org/css-sprites-image-cut-and-optimize-skill/ http://www.mangguo.org/css-foreground-image-merge-technology/ |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |