网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接收程度,还能影响访问者对全部网站的印象。假如你经常留心别人的网站,你应当会发明在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。毕竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个相比完整的总结。
1.色彩背景
色彩背景的设计是最为简略的,但同时也是最为常用和最为重要的,由于相对于图片背景来说,它有无与伦比的显示速度上的上风。在网页文件中,一般通过<body>标签来指定页面的色彩背景,其HTML语法为:
<body bgcolor="color">
其中的"color"表现不同的色彩,可以用各种不同的色彩表现方法,相比常用的有直接用色彩的英文名称,如blue、yellow、black等等,还可以用色彩的十六进制表现方法,如#0000FF、#FFFF00、#000000等等,此外还可以用百分比值法和整数法,其成果都是一样的。
色彩背景固然相比简略,但也有不少处所需要留心,如要根据不同的页面内容设计背风景彩的冷热状态,要根据页面的编排设计背风景彩与页面内容的最佳视觉搭配等等。
2.沙纹背景
沙纹背景实在属于图片背景的范畴,它的重要特点是全部页面的背景可以看作是局部背景的重复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。
初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发明浏览器上显示出来的不仅仅是一个照片,而是同一照片在程度和竖直方向上的重复排列。这就是浏览器处理图片背景时的规律方法,利用这一规律我们可以用一小块图片作为页面背景,让它主动在页面上重复排列,展满全部页面,从而使网页的体积大大减小。
读者到现在恐怕都已经知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但留心要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。实在现的HTML语法如下:
<body background="picture">
其中的"picture"表现背景图片的URL路径。
3.条状背景
条状背景与沙纹背景是相比类似的,它实用于页面背景在程度或竖直方向上看是重复排列的,而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的主动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。
以在竖直方向上排列为例,首先用图像处理软件做一个从左到右为蓝白渐变的程度条状图片,其长度与页面的宽度相当。也通过
<body background="picture">
将其设为页面背景,经浏览器显示后,就成为全部页面从左到右蓝白渐变的分栏色彩背景。当然,也可以用类似的方法实现条状背景在程度方向上的重复排列。
4.照片背景
把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的主动重复排列却使这一愿看难以实现。怎么办呢?只有想不到的,没有做不到的,这里我们用上一点简略的CSS。在网页文件的<head>……</head>之间参加下面的CSS语句:
<style type="text/css"><!--body{background-image:url(myphoto.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%}--></style>
这样,在网页页面中,就可以看到你的照片位于页面的正中间,而且在拉动浏览器窗口的转动条时,照片仍然位于页面的正中间而不随页面内容一起转动。假如你感到照片位于页面的正中间不满足,你也可以随便地调解它在页面中的地位,只需要调解"background-position"的值就可以了。