您的位置: 首页 > 技术文档 > 网页制作 > 关于图片背景的研究
关于box(盒模式)的一系列问题 回到列表 从报纸排版中看WEB标准的应用
用户名:
密 码: 忘记密码
注册会员 游客参观 论坛帮助
 关于图片背景的研究

作者:u66 时间: 2005-09-02 文档类型:原创 来自:U66
浏览统计 total:15616 | year:4158 | Quarter:671 | Month:671 | Week:152 | today:2

在网页中,有一个好的背景往往能产生很特别的效果。但无缝的网页背景的制作,却着实让我费了不少脑筋,因为初始时,由于计算错误,背景总是不能很好的接合在一起,直到今天我在研究斜线背景才领悟了其中的道理。

让我们来看看下面的斜线图片:

图一:


这是一个斜线背景,通过它可以得到非常漂亮的斜线背景。如下。


要随意做出这样的斜线有什么窍门呢,通过我的观察,我发现了利用补充法可以的到很好的无缝背景。

让我简单来做个说明:

1、首先画出你想要的背景,然后开始定义文档,我做了两个实验都是10x10个象素,因为这样计算起来要简单的多。

2、然后我开始画出一部分斜线,我的想法是3个象素宽的斜线,间隔7个象素宽,现在我从文档的定部开始布局,为了方便布局和计算简单,我把网格打开,并设置它的间距和子网格为1个象素,接着我又设置矩形选框工具的样式为固定大小:1x1个象素,这样最上边的斜线很快就出来了。如下图:

3、接下来要间格7个象素画另一条斜线了。这就是我们要做的关键了,要是我们只是简单的数够7个象素,然后开始画另一条斜线的话,我们会得到非常糟糕的结果。就是图片拼接错误。原因在什么呢?

4、让我用详细的图片来说明如何画另一条斜线。如图:

为了能清楚的看明白如何补充,我将原来的背景(10x10象素大小)填充成浅灰,并将画板扩展成17x17个象素的大小。现在在画板上,红色的是表示黑色斜线应该连接的图案,为了补充连续背景缺少的元素,我们将红色的部分移动到右边来,也就是代表我们补充元素的灰色色块。只要定义好了开头,后面的象素就很好补充了。

按照上面的思路,我又做了第二个实验,同样是10x10个象素的画板,看下图:

效果图如下:

按照我上面说的,我只画出了一部分我想要的背景,然后用补充法,完成了这个作品。

如果大家还有兴趣,可以试着做其他的背景图片试试,会非常有趣的。

出处:U66
责任编辑:moby

◎进入论坛网页制作网站综合版块参加讨论

相关文章 更多相关链接
首届青少年网页设计大赛决赛揭晓
网页设计中的文字运用
解决Flash影片中的图片抖动锯齿
网页设计的布局理念
FLASH,你要我怎么跟你说!
全网 本站 论坛
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
PS人物绘制技法及实例讲解
《物志》封面设计欣赏
中文字体设计
掌握 Ajax
ObjectDataSourc控件
解决IE更新对FLASH产生影响
任我炫网络广告设计大赛
NewWebPick电子杂志第4期发布
attachMovie外部swf中的元素
flash通过外部文本动态载图片
栏目最新 栏目最新列表
掌握 Ajax
ObjectDataSourc控件
解决IE更新对FLASH产生影响
attachMovie外部swf中的元素
flash通过外部文本动态载图片
OOP编程实例——音乐播放器
一款DIV+CSS导航条效果
获取用户需求的十大沟通技巧
蚁群算法js版
人物和背景的融合

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

本文总共有 11 条评论,现在显示最新的 5 条。评分:- llllllllllllllllllll + 评分人数: 9 ,平均分: 4.56


zhangliu Publish at 2005-12-20 20:55:01 评分4
不太怎么明白,能说的简单些吗
janly Publish at 2005-12-16 9:36:02 评分4
非常有趣,谢谢了。
风蓝 Publish at 2005-12-14 17:02:16 评分5
不错,教程写的很详尽,有空我也DIY一个~
大家可以去这个网页看看,http://www.makewing.com/lanren/bg.htm
有些还不错,不过不常更新。我喜欢收集漂亮的背景图片。
veevee Publish at 2005-12-14 0:11:35 评分5
学会了变通了,不错第二个!!
yuanshi Publish at 2005-11-3 16:37:13
很难看得明白..
可能自己太笨了

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Flash第一步系列》
《交互设计之路》
《Dreamweaver 从基础到实践》
《色彩管理》
《网页设计专家门诊》
《职业之道》设计师的技能书
《Flash MX 2004网站开发精粹》