本栏目:【PhotoShop教程】 | 内容为:PS无缝背景的制作 |
如果希望在页面的不同角落里放置不重复的背景图呢?
如果网页的背景要如图所示,并要求在不同的分辩率下都显示在右下角,怎么办呢???
你不会将它做成一张大图吧?不行的,在不同的分辩率,图的大小不同呀,你只能做一张背景。怎么办呢???
别担心,你只需要下面这个背景就好了:
那看起来不可以呀,才这么一张小图,而且不可以平铺起来做。
别担心嘛,你忘记有CSS了?你看我当前这个页面,你别以为我的背景是一张大图呀,其实只有一张很小的图,左上角的部分,只不过是表格中再应用CSS定义背景,组合起来的。
在Dreamweaver中做起来,一点不困难。首先建立一个新样式,这个总会吧:),如图:
在样式中,选“Background”选项,再在右边进行设置,本例首先在“Background Image”选项中输入背景图像的路径,就是刚才所切的小图。“Repeat”是问你是否重复的平铺背景图,这里是单张效果,当然不希望平铺,所示设置成“no-repeat”。“Attachment”选项是问你图像位置是否固定,设置“Fixed”,则表示固定。“Horizontal”是水平位置,这里选“right”表示居右。“Vertical”是垂直位置,这里选择“bottom”,则表示靠底。
这样,定义好的这个样式,不仅可以应用到页面的背景,甚至可以用到表格、单行格中去。不信,可以存下本来,用Dreamweaver来编辑一下,研究一下。
小 结
这里还有一个计算问题,就像本例中,我的背景图的宽度是773,通常在800*600分辩率下,页面的最大宽度是778。我故意用773,则余下来的5像素,浏览器就会用平铺,那铺起来,你只看到一部分,而看到的这部分,正是我希望你看到的。当然,在1024效果下,能看全部,但效果不会差。