当前位置:首页 > DIV+CSS实例 > 正文

CSS Sprites 图片整合技术

作者:cuikai 来源:蓝色理想 【 】 浏览: 添加日期:2009-07-17 我要评论(14)     

css中用一张背景图做页面的技术有什么优势?

简单介绍一下 CSS Sprites 的优点:

  • 当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。
  • CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。

实现方法

  1. 首先将小图片整合到一张大的图片上
  2. 然后根据具体图标在大图上的位置,给背景定位。
    background-position:-8px -95px;
(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS实例〗Tags: css 图片整合 css图片

更多评论(14)..会员评论

pengsikan(210.75.*.*) 发表于:2011-06-29 15:32:01
问下,可以取1px高,300px宽,当背景循环吗?
管理员回复:看你图片怎么排版了
zzwlovegfj(110.84.*.*) 发表于:2011-04-01 11:18:57
原来是这样子弄的啊,嘿嘿...谢站长分享了...
管理员回复:不客气
TTTT(124.239.*.*) 发表于:2010-09-27 11:21:56
确实是比较好,好多网站正在这么用!
lying880412(113.107.*.*) 发表于:2010-04-19 22:42:12
具体是怎么回事?这个我还不明白!
管理员回复:你先了解下css手册中背景图片相关的内容吧
hello(59.172.*.*) 发表于:2009-12-02 11:13:15
具体应该怎么做呀?
管理员回复:用作图软件马这些图片整合到一张图片上
mai(113.67.*.*) 发表于:2009-11-29 23:54:12
豁然开朗!!
管理员回复:^_^
小静(220.174.*.*) 发表于:2009-11-04 22:22:39
有没有兼容问题?
管理员回复:应该不会
菜鸟(125.41.*.*) 发表于:2009-10-21 21:54:02
我是菜鸟,能再说明白点么?举个例子,我明白这是什么意思,但不懂代码格式。
管理员回复:这个只要明白了css背景图片就知道怎么回事了,说白了就是用背景定位到图片的某一部分

出差旅游免费预订酒店

【视频教程】新手常见问题