浅谈网页背景设计技巧和经验

时间：2023-03-01 19:09:01 | 来源：建站知识

时间：2023-03-01 19:09:01 来源：建站知识

以前在校做网页是用简单表格做的。背景什么都不会，后来慢慢的也学会了一些东西。在这我说下网页背景色。很简单，其实现在很多视频教程也有。

一个主页的背景就相当于房间墙壁一样，网页中的背景设计是相当重要的尤其是对于个人主页来说。好的背景不但能影响访问者对网页内容的接受水平，还能影响访问者对整个网站的印象。如果你经常注意他人的网站，应该会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景，还有它设计方法都是怎样的呢，现在我来为大家作一个总结。

1. 颜色背景

有无与伦比的显示速度上的优势。网页文件中，颜色背景的设计是最为简单的但同时也是最为常用和最为重要的因为相对于图片背景来说。一般通过标签来指定页面的颜色背景，其 HTML 语法为 :

可以用各种不同的颜色表示方法，其中的 "color" 表示不同的颜色。比较常用的有直接用颜色的英文名称，如 blue yellow black 等等，还可以用颜色的十六进制表示方法，如 #0000FF #FFFF00 #000000 等等，此外还可以用百分比值法和整数法，其效果都是一样的

但也有不少地方需要注意，颜色背景虽然比较简单。如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

2. 沙纹背景

主要特点是整个页面的背景可以看作是局部背景的反复重排，沙纹背景其实属于图片背景的范畴。这类背景中以沙纹状的背景是为常见，所以我将其统称为沙纹背景。

当试图把自己的照片作为页面的背景是却发现浏览器上显示出来的不只仅是一个照片，初学主页制作者都有这样的经历。而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处置图片背景时的规律方法，利用这一规律我可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。

就是找一个小的图片，读者到现在恐怕都已经知道了沙纹背景的原理和实现方法。越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。其实现的 HTML 语法如下 :

其中的 "picture" 表示背景图片的 URL 路径。

3. 条状背景

与沙纹背景所不同的只让图片在一个方向上重复排列。 条状背景与沙纹背景是比较相似的适用于页面背景在水平或竖直方向上看是重复排列的而在另一方向上看则是没有规律的也是利用浏览器对图片背景的自动重复排列。

首先用图像处置软件做一个从左到右为蓝白渐变的水平条状图片，以在竖直方向上排列为例。其长度与页面的宽度相当。也通过

经浏览器显示后，将其设为页面背景。就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。

4. 照片背景

但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢 ? 只有想不到没有做不到这里我用上一点简单的 CSS 网页文件的之间加入下面的 CSS 语句 把自己或朋友的照片作为页面的背景让大家看到有点令人激动的事情。

5. 复合背景

那么你看到什么 ? 颜色背景还起作用吗 ? 对，如果你练习上面的照片背景 ” 时 “ 不小心 ” 也设置了标签里的颜色背景。能看到照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。设计方法，就不用我再多说了吧 !

6. 局部背景

能不能在页面上为某个局部的内容设置属于它自己的背景呢 ? 回答是肯定的 前面我所说的背景都是整个页面的背景。 可以为表格设置一个不同于页面的背景，最为罕见的表格的设计当中。甚至在不同的表格单元中，也可以设置各个表格单元自己的背景。

今天就写到这我想我写的也差不多就这些了吧，现在网页软件也在不断的更新和升级，也许我懂的这些还太少，如果有什么见意和要给我留言，大家一起交流，一起进步。

本文出处：

请以链接形式注明出处，否则请不要转载。