婚姻不可以有裂缝 背景也不可以有

婚姻不可以有裂缝，背景也不可以有

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

开始思考了

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

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

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




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




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




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


如 何 做 到 无 缝 拼 合

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





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

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




4）以上例来说明，示范一下做法：

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




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




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


0

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


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

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

1）随手打开一幅希望做背景的图像，当然不需要太大：


2

2）选择菜单，如图：


3

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


4

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


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

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


6

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

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


7

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

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

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


8

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


9

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

小 结

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

……