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

 找回密码
 注册

只需一步,快速开始

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

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

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

查看: 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 编辑 ]
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 编辑 ]
帖子
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 |显示全部楼层
  1. background-image:url(URL);
  2. background-position:top left / top center / top right / center left / center center / center right / bottom left / bottom center / bottom right / x% y% / xpos ypos;
  3. 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.

回顶部