打印

[求助] 所有背影放一张图，谁能说说其中的原理，这叫什么技术

peng6000 [楼主]

初级会员

帖子: 38
体力: 82
威望: 0
离线: 23 天

1^# 大中小发表于 2008-6-29 11:29

比如新浪，

引用:

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

10dw

小盆友

高级会员

帖子: 469
体力: 911
威望: 0
当前: 美洲美国
离线: 2 天

专长 JS,PHP,MySQL

2^# 大中小发表于 2008-6-29 11:41

宽带技术

Welcome to the tavern of the rising sun!

TOP

美橙vps独立IP月付189元

wbina

初级会员

帖子: 31
体力: 73
威望: 0
当前: 安徽合肥
离线: 3 天

3^# 大中小发表于 2008-6-29 13:23

离掉技术！

TOP

中央美院远程平面设计进修班

macji

麦鸡

高级会员

帖子: 363
体力: 674
威望: 3
当前: 浙江杭州
离线: 1 天

专长 前端制作,JS,PHP

4^# 大中小发表于 2008-6-29 13:24

css sprites

麦鸡Macji

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

hongfeng8868

新手上路

帖子: 22
体力: 9
威望: 0
离线: 77 天

5^# 大中小发表于 2008-6-29 13:36

用CSS的background-position

前端开发

TOP

zehee

中黑

银牌会员

帖子: 1890
体力: 1334
威望: 5
当前: 北京西城区

专长 网页设计,前端制作,JS

6^# 大中小发表于 2008-6-29 15:57

引用:

原帖由 macji 于 2008-6-29 13:24 发表
css sprites

正解！

Hi,I'm Zehee !

TOP

joymv

貌似没几年青春

中级会员

帖子: 284
体力: 455
威望: 0
当前: 江西南昌
离线: 2 天

专长 网页设计,PHP

7^# 大中小发表于 2008-6-29 23:14

引用:

原帖由 zehee 于 2008-6-29 15:57 发表

正解！

是啊，楼上的朋友不要误导人家啦。

iT堂

TOP

sunnybai

中级会员

帖子: 168
体力: 358
威望: 0
当前: 广东江门
离线: 8 天

8^# 大中小发表于 2008-6-30 06:08

background-position 坐标定位

TOP

ONEBOYS

中级会员

帖子: 215
体力: 427
威望: 0
当前: 浙江杭州
离线: 1 天

9^# 大中小发表于 2008-6-30 16:21

需要精确定位啊。这个倒挺烦的

TOP

szqhui

茫宇

中级会员

帖子: 200
体力: 450
威望: 0
当前: 北京东城区
离线: 2 天

专长 网页设计,ASP,网站运营

10^# 大中小发表于 2008-6-30 17:01

css 的背景图不缓冲，定位麻烦点但是网速和服务器得好啊

http://www.87077776.org

TOP

duluohua

月亮上的狗

银牌会员

帖子: 638
体力: 1161
威望: 0
当前: 江苏苏州
离线: 8 天

专长 前端制作,ASP,.NET

11^# 大中小发表于 2008-6-30 17:10

反正背景下载一次就好了其实还是很方便的
做那个背景图的时候注意一下定位没问题的

FLASH 诚征友链

TOP

ndwuming

大冲页面仔

中级会员

帖子: 267
体力: 339
威望: 0
当前: 广东深圳
离线: 12 天

12^# 大中小发表于 2008-7-1 09:23

css sprites

TOP

sgpy

初级会员

帖子: 194
体力: 179
威望: 0
当前: 北京海淀区
离线: 2 天

专长 网页设计,前端制作

13^# 大中小发表于 2008-7-1 09:58

这种方法叫:css sprites，是一种CSS优化方法；
此方法是从宽带和HTTP请求、文件管理角度来优化CSS，我称此法为CSS高级优化；
只需一次下载完成多个背景需求，减少HTTP——降低服务器压力——快速响应下载——节省带宽，需要注意的地方：一旦图片位置进行调整就需要给CSS中背景定位(例：background-position:-40px -30px;)的值进行调整，否则会出现背景图错位，还有了需求给用背景的容器指定高宽（除需平铺背景外）；任何一种技术和方法我们要从多个角度去看待，这个世界上不可能有非常完美的事物存在，任何事物都有其两面性，我们要有自己的见解和认知，合理应用在合适的项目需求中。

天外有天，人外有人

TOP

cuikai

银牌会员

帖子: 1575
体力: 2057
威望: 7
当前: 北京海淀区
离线: 2 天

专长 UI,前端制作

14^# 大中小发表于 2008-7-1 10:01

引用:

原帖由 sgpy 于 2008-7-1 09:58 发表
这种方法叫:css sprites，是一种CSS优化方法；
此方法是从宽带和HTTP请求、文件管理角度来优化CSS，我称此法为CSS高级优化；
只需一次下载完成多个背景需求，减少HTTP——降低服务器压力——快速响应下载——节省带 ...

我正要问css sprites是什么玩意呢…………………… 谢谢详细注解

崔凯加油: www.uicss.cn

TOP

不含ppa

银牌会员

帖子: 3753
体力: 2571
威望: 5
离线: 18 天

专长 网页设计,前端制作,.NET

15^# 大中小发表于 2008-7-1 10:40

apple 的导航栏就是css sprites

Whip out the dissonance

TOP

shaohua162001

荷西

高级会员

帖子: 1116
体力: 752
威望: 1
当前: 北京海淀区
离线: 3 天

专长 UI,前端制作

16^# 大中小发表于 2008-7-1 10:48

我来翻个页

俺们属于公司网站不用考虑流量

TOP

move

中级会员

帖子: 151
体力: 277
威望: 0
当前: 浙江宁波
离线: 3 天

专长 网页设计,平面

17^# 大中小发表于 2008-7-1 11:03

回复 sgpy 在 13# 的帖子

还有很多不懂的地方　慢慢累积起来

我觉得不管什么网站，按大家的标准走总是好的吧

TOP

ausure

新手上路

帖子: 25
体力: 32
威望: 0
离线: 16 天

18^# 大中小发表于 2008-7-1 15:09

至于每个图片的位置，你可以用软件生成从而得到它的位置的。也可以上传小图片包，在线生成一个大图。

你可以从 http://spritegen.website-performance.org/ 上传zip包试试

出处：http://www.moffee.cn/blog/go.php/page/1/4/

siteba.cn

TOP

lyl213

新手上路

帖子: 15
体力: 33
威望: 0
当前: 辽宁沈阳
离线: 3 天

19^# 大中小发表于 2008-7-1 15:14

学习中！

TOP

alize

悲剧小黑

高级会员

帖子: 343
体力: 613
威望: 0
当前: 四川成都
离线: 17 天

专长 UI,前端制作,JS

20^# 大中小发表于 2008-7-1 15:26

无限制重复.这个也能实现?

郁闷......

TOP

qsl117

初级会员

帖子: 58
体力: 126
威望: 0
当前: 北京朝阳区
离线: 25 天

专长 网页设计,前端制作

21^# 大中小发表于 2008-7-1 16:22

无限制重复?

老子有车还是自行的

TOP

simplewebs

银牌会员

帖子: 5892
体力: 2990
威望: 0
当前: 上海普陀

专长 网页设计,前端制作,UE

22^# 大中小发表于 2008-7-1 16:59

google的很多产品都是这样做的

Simpledc.com旅行 | Taobaoebay.net卖球衣

TOP

NTTDoCoMo

中级会员

帖子: 128
体力: 249
威望: 0
当前: 广东广州
离线: 17 天

23^# 大中小发表于 2008-7-1 17:28

不过亲身测试IE6好像支持的不是很好哦！

TOP

alize

悲剧小黑

高级会员

帖子: 343
体力: 613
威望: 0
当前: 四川成都
离线: 17 天

专长 UI,前端制作,JS

24^# 大中小发表于 2008-7-1 17:37

引用:

原帖由 qsl117 于 2008-7-1 16:22 发表
无限制重复?

我的意思是说比如在某一处..我需要那个张图里面的某一个让它平铺

郁闷......

TOP

hukobing

初级会员

帖子: 23
体力: 52
威望: 0
离线: 3 天

25^# 大中小发表于 2008-7-7 14:56

一张图的优点：

图片大小变小了（把小图拼成大图一般可以节省三分之一）；
减少服务器压力（减少服务器请求，只要请求一次，下载一次就好了）；
维护方便（只要更新一张图片就可以，不需要一张一张的改．）

TOP