请选择进入手机版 | 继续访问电脑版

设为首页收藏本站腾讯微博新浪微博

客服QQ 800003860 切换到窄版

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 地图任务 - 给官方提建议

论坛活动及任务 归纳网站最新活动请更新论坛注册邮件 第一季积分兑换活动 - 12周年上海聚会照片

万元奖励等你拿——点点网模板设计大赛 畅销译文征名——让最火的畅销书，印上你的标签 看看有才会员作品，欢迎打分拍砖

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › DIV+CSS把所有的背景图片合并到一张[附排版小工具]

查看: 5805|回复: 50

[求助] DIV+CSS把所有的背景图片合并到一张[附排版小工具] [复制链接]

kendy881　楼主

帖子: 24
体力: 113
威望: 0
居住地: 广东省广州市

发表于 2008-11-25 15:37:27 |显示全部楼层

如上图,将一个网页用到的图片全部合并到一张里面了.
不知道在写CSS文件和合并图片时是不是有什么技巧呢?
大家一般是使用什么工具?
刚刚入门,问题较多,莫见怪.知道的朋友麻烦告诉一下.

===================答案=====================

原帖由 eLore 于 2008-11-25 18:56 发表

background-image:url(URL);
background-position:top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x% y% / xpos ypos;
back ...

感谢解答的朋友们,虽然在等待解答的过程中,我自己努力已经找到答案,但是也让我感觉到论坛的良好氛围.

[ 本帖最后由 kendy881 于 2008-11-27 22:56 编辑 ]

西部数码顶级域名注册商39元抢注！

使用道具举报

kendy881　楼主

帖子: 24
体力: 113
威望: 0
居住地: 广东省广州市

发表于 2008-11-25 17:02:02 |显示全部楼层

没人进来...
不知道有没有小软件可以查看图片的大小和测量图片选定区域的宽度和高度的呢?

原本打算自己用.Net写一个,后来找到一个不错的小工具,就放弃了自己写了.
跟大家分享....
http://www.namipan.com/d/picpick.zip/296c5f76e6d1bc0aa156e114311a6da5204593ca37570c00

[ 本帖最后由 kendy881 于 2008-11-27 22:58 编辑 ]

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

帖子: 4
体力: 29
威望: 0
居住地: 陕西省西安市

发表于 2008-11-25 17:02:15 |显示全部楼层

我也在寻找答案！！！

使用道具举报

帖子: 56
体力: 165
威望: 0

发表于 2008-11-25 17:13:42 |显示全部楼层

关注等待高手

使用道具举报

帖子: 224
体力: 673
威望: 2
居住地: 广东省惠州市

发表于 2008-11-25 18:56:52 |显示全部楼层

background-image:url(URL);
background-position:top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x% y% / xpos ypos;
background-repeat:no-repeat;

复制代码

网络如此多娇引无数小鸟竟折腰

使用道具举报

昂流

银牌会员 

帖子: 1109
体力: 1814
威望: 0

发表于 2008-11-25 21:01:23 |显示全部楼层

你需要用到绝对定位
这样可以达到你要的效果

使用道具举报

梧桐树下

银牌会员 

帖子: 33
体力: 2958
威望: 1
居住地: 广东省广州市

发表于 2008-11-25 21:47:30 |显示全部楼层

我也好想知道~~~期待~~~

使用道具举报

帖子: 19
体力: 46
威望: 0
居住地: 四川省成都市

发表于 2008-11-25 21:59:34 |显示全部楼层

用绝对定位就行了，多看一点例子你就会明白的！

使用道具举报

蓝蓝的神仙

帖子: 1047
体力: 5972
威望: 3

发表于 2008-11-25 22:00:08 |显示全部楼层

合并5#的

background:url(图片地址，不要引号) -Xpx -Ypx no-repeat;

X为图域距整张图左边的距离
Y为图域距整张图上边的距离

如果repeat-x，那么图域左右不能放其他的图域，同理repeat-y。

iLikejQuery.com 域名出售

使用道具举报

kendy881　楼主

帖子: 24
体力: 113
威望: 0
居住地: 广东省广州市

发表于 2008-11-25 22:14:56 |显示全部楼层

谢谢楼上几位的解答,我今天发完帖子之后,找了很多例子来看,明白了不少.
现在希望可以找一个小软件可以查看图片的坐标..
那样就不需要整天开个PS,或者FS来写CSS

使用道具举报

帖子: 23
体力: 56
威望: 0
居住地: 广西壮族自治区南宁市

发表于 2008-11-25 22:19:21 |显示全部楼层

回复 10# kendy881 [楼主] 的帖子

我也希望有这样的软件。新手。

使用道具举报

帖子: 19
体力: 46
威望: 0
居住地: 四川省成都市

发表于 2008-11-25 22:32:34 |显示全部楼层

我一直用 PS或者是QQ的截图来看

使用道具举报

kendy881　楼主

帖子: 24
体力: 113
威望: 0
居住地: 广东省广州市

发表于 2008-11-25 23:18:43 |显示全部楼层

原帖由 ieiavj 于 2008-11-25 22:32 发表
我一直用 PS或者是QQ的截图来看

比较麻烦,准备用.net写一个,顺利的话,到时发给大家用.

使用道具举报

kendy881　楼主

帖子: 24
体力: 113
威望: 0
居住地: 广东省广州市

发表于 2008-11-27 22:40:36 |显示全部楼层

http://www.namipan.com/d/picpick.zip/296c5f76e6d1bc0aa156e114311a6da5204593ca37570c00
正在自己写的过程中,竟然莫明其妙的找到了这样的软件,哈哈.真是太幸运了.
软件很小,但是功能毫不逊色,大家下载试一下吧..
在论坛没有上传附件的权限,放到纳米盘上面了.

使用道具举报

桂荣

帖子: 112
体力: 432
威望: 4
居住地: 山东省济南市

发表于 2008-11-27 22:57:01 |显示全部楼层

是吗

使用道具举报

kendy881　楼主

帖子: 24
体力: 113
威望: 0
居住地: 广东省广州市

发表于 2008-11-28 09:16:52 |显示全部楼层

UP一下,应该有很多新手需要这个小工具的...
下载过的朋友觉得好就帮忙顶一下.

使用道具举报

小熊尼尼

帖子: 123
体力: 253
威望: 0

发表于 2008-11-28 09:54:43 |显示全部楼层

在背景定义时，背景图片的水平位置或垂直位置定好就可以了

别人只会告诉你去做什么，却无法告诉你如何去做，凡事靠自己，没有人可以帮你一辈子！！

使用道具举报

kendy881　楼主

帖子: 24
体力: 113
威望: 0
居住地: 广东省广州市

发表于 2008-11-28 10:11:18 |显示全部楼层

原帖由 nininj 于 2008-11-28 09:54 发表
在背景定义时，背景图片的水平位置或垂直位置定好就可以了

谢谢..楼上几位也已经解答了..我在论坛也找了不少的教程.

使用道具举报

帖子: 108
体力: 281
威望: 0

发表于 2008-12-2 12:18:00 |显示全部楼层

background-position

www

使用道具举报

帖子: 174
体力: 618
威望: 0
居住地: 广东省广州市

发表于 2008-12-15 21:51:05 |显示全部楼层

软件太棒了

顶

谢谢楼主

使用道具举报

钻石会员 

帖子: 2235
体力: 7599
威望: 19

发表于 2008-12-16 10:04:31 |显示全部楼层

不用那么麻烦吧，新建一个图，视图-查看网格, 把大小调到合适，需要哪个图数一下格子数就知道是偏移多少象素了

使用道具举报

帖子: 25
体力: 120
威望: 0

发表于 2008-12-31 09:41:14 |显示全部楼层

链接下不了，麻烦楼主更新下

使用道具举报

橘子香水

帖子: 557
体力: 966
威望: 5
居住地: 福建省福州市

发表于 2008-12-31 11:03:33 |显示全部楼层

查看坐标的非常简单啊,一个网页就好了,我正在给我女朋友写这样的工具,很简单的,貌似现在已经可以用了,就是图片合成的话，用程序做效果不是很好

xml5

使用道具举报

帖子: 32
体力: 212
威望: 0
居住地: 安徽省蚌埠市

发表于 2008-12-31 11:08:47 |显示全部楼层

软件的确不错!!!这么小还有如此强大的功能!!!

真希望多出些类似绿软件

使用道具举报

小唐豆豆

中级会员 

帖子: 39
体力: 320
威望: 0
居住地: 江苏省淮安市

发表于 2008-12-31 14:33:13 |显示全部楼层

做个记号。
FastStone Capture,这个小软件非常好用，功能齐全而且体积小，强烈推荐~

xiaotangdoudou.com

使用道具举报

帖子: 326
体力: 701
威望: 0
居住地: 广东省广州市

发表于 2008-12-31 17:49:02 |显示全部楼层

楼主辛苦了... 谢谢

<阿龍> donaldsu.cn

使用道具举报

刺客丢了火

中级会员 

帖子: 233
体力: 419
威望: 0
居住地: 浙江省杭州市

发表于 2008-12-31 18:36:20 |显示全部楼层

常会见到这样的命名
repno.png - no-repeat
repx.png - repeat-x...
repy.png ....

[ 本帖最后由 touzhao 于 2008-12-31 18:37 编辑 ]

使用道具举报

老吃不饱

金牌会员 

帖子: 774
体力: 3916
威望: 2

发表于 2008-12-31 22:07:38 |显示全部楼层

多个图片放在一张图片上，再用CSS的background-position来进行定位。可以只加载一次。但这样做的前提是不要使这张图片文件大小太大了。

不要浮躁

使用道具举报

帖子: 75
体力: 253
威望: 0

发表于 2009-1-1 13:08:55 |显示全部楼层

非常好的软件~喜欢~

使用道具举报

帖子: 4
体力: 19
威望: 0
居住地: 广西壮族自治区南宁市

发表于 2009-1-1 13:24:25 |显示全部楼层

真是很容易看明白啊，谢谢了

使用道具举报

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-1-10 14:32 , Processed in 4.389867 second(s), 8 queries , Gzip On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部