分享
 
 
 

背景处理技巧

王朝other·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

制 作 无 缝 背 景 , 应 该 算 是 入 职 网 页 设 计 制 作 的 必 修 课 , 在 这 里 说 似 乎 有 点 多 余 。 但 是 我 还 是 要 说 下 去 , 希 望 给 你 另 外 一 种 方 法 或 者 另 外 一 种 思 路 。 如 果 你 不 用 会 Photoshop 和 Dreamweaver , 我 还 是 会 照 说 的 。 同 时 , 我 会 说 一 下 CSS , 这 东 西 叫 样 式 表 , 我 想 你 比 我 熟 悉 。

开始思考了

首先要学会拆分背景图片,毕竟用在网上的图片,要尽量的小。所以,有一个原则:背景图片要做到不可再拆分,才算是成功的。

在网页中,IE默认会将背景向右、向下的重复铺下来(当然,你可以控制,后面会分析)。

1)假如背景要做成下图所示,那你可以动下脑筋分析一下,如何拆分它:

2)首先考虑不同的分辩率,假如现在是针对800*600的,但也要考虑1024*778的。就这张图来说,向下铺的时候,没有分辩率问题,但是向右铺就有分辩率问题产生。背景图宽度不够的话,在1024就会像下图所示:

所以,如果不想右边重复出现图像块的话,那么,首先可向右增加画布宽度,超出部分,并不会显示出来,如图所示:

3)现在要考虑节约的事了,花最少的钱办同样的事才是能手。底图不宜太大,免得别人下载时痛苦。因为背景是平铺的,所以可以考虑将重复的部分清除,通过分析,会发现其实用下面这部分就足够,其余的部分都是多余的:

如 何 做 到 无 缝 拼 合

1)首先来看一个网页背景,缩小了的。能看得出它的边界吗?其实它是由右边的背图经过平铺而成的:

2)究竟是如何做的呢?一个原则,这个图只要左边界接右边界、上边界接下边界是吻合的,那么就是无缝背景图了。

3)那么,如何做边界的吻合呢?正好Photoshop有一个位移滤镜,它勾选“折回”选项后,可以使上边接下边,左边接右边,你可以想像它是一滚动的机器,使一部分上面的东西跑到下面(左边跑到右边),而边界刚好是从原来连接的部分切割到上下(左右)了,所以,就可以达到平铺之后无缝隙。

4)以上例来说明,示范一下做法:

首先,在一张图像上,随意的输入下面的文字,现在随意就行了,然后拼合所有图层。

接着,使用位移滤镜,至于位移的数量,通常为图像尺寸的一半好了,一定要勾选“折回”。

执行位移之后,结果如图所示,这时已经可以看得到边界上下是接合的了。你就把它当作一作纸, 卷起来时图案是可以吻合的。

这时图像中间有些空白的地方,可以像下图一样补上图像,反正不碰到边界,怎么弄都行。这时,无缝图景图就弄好了。

听说Photoshop7有了直接做无缝背景的工具?

是的,在此谢谢Adobe小姐,她真是一位体帖的人,难怪喜欢她的人这么多。OK,现在先关掉photoshop6,打开photoshop7。

1)随手打开一幅希望做背景的图像,当然不需要太大:

2)选择菜单,如图:

3)在打开的滤镜面板中,首先从左边的工具中使用选框工具,拖选出需要做背景的范围。然后在右边的选项中设置合适的参数,最后按“Generate”按钮就行了,还可以继续“Generate Again”下去,直到满意为止。

4)本例中结果如下图所示,它填充起来,真的是无缝接合的。

如果希望在页面的不同角落里放置不重复的背景图呢?

如果网页的背景要如图所示,并要求在不同的分辩率下都显示在右下角,怎么办呢???

你不会将它做成一张大图吧?不行的,在不同的分辩率,图的大小不同呀,你只能做一张背景。怎么办呢???

别担心,你只需要下面这个背景就好了:

那看起来不可以呀,才这么一张小图,而且不可以平铺起来做。

别担心嘛,你忘记有CSS了?你看我当前这个页面,你别以为我的背景是一张大图呀,其实只有一张很小的图,左上角的部分,只不过是表格中再应用CSS定义背景,组合起来的。

在Dreamweaver中做起来,一点不困难。首先建立一个新样式,这个总会吧:),如图:

在样式中,选“Background”选项,再在右边进行设置,本例首先在“Background Image”选项中输入背景图像的路径,就是刚才所切的小图。“Repeat”是问你是否重复的平铺背景图,这里是单张效果,当然不希望平铺,所示设置成“no-repeat”。“Attachment”选项是问你图像位置是否固定,设置“Fixed”,则表示固定。“Horizontal”是水平位置,这里选“right”表示居右。“Vertical”是垂直位置,这里选择“bottom”,则表示靠底。

这样,定义好的这个样式,不仅可以应用到页面的背景,甚至可以用到表格、单行格中去。不信,可以存下本来,用Dreamweaver来编辑一下,研究一下。

小 结

这里还有一个计算问题,就像本例中,我的背景图的宽度是773,通常在800*600分辩率下,页面的最大宽度是778。我故意用773,则余下来的5像素,浏览器就会用平铺,那铺起来,你只看到一部分,而看到的这部分,正是我希望你看到的。当然,在1024效果下,能看全部,但效果不会差。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有