网页中的背景设计是相当首要的，特别是对于个人网站主页来说，一个网站主页的背景就相当于一个房间里的墙壁地板一样，好的背景不但能影响造访者对网页内容的接管程度，还能影响造访者对全部网站的印象。如果你时常留意别人的网站，你该当会创造在不同的网站上，以至同一个网站的不同页面上，都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景，还有它们的设计法子都是怎么的呢，现在就由嗡炒为大家作一个对比完全的总结。

1.颜色背景

颜色背景的设计是最为简略的，但同时也是最为常用和最为首要的，由于相对于图片背景来说，它有不相上下的显现速度上的优势。在网页文件中，普通经过＜body＞标签来指定页面的颜色背景，其HTML语法为：

＜bodybgcolor="color"＞

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

颜色背景固然对比简略，但也有不少处所需求留意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

2.沙纹背景

沙纹背景其实属于图片背景的范畴，它的首要特点是全部页面的背景可以看作是局部背景的重复重排，在这类背景中以沙纹状的背景是为常见，所以咱们将其统称为沙纹背景。

初学网站主页制造者都有这样的经历，当试图把自己的照片作为页面的背景是，却创造涉猎器上显现出来的不仅仅是一个照片，而是同一照片在程度和竖直方向上的重复排列。这就是涉猎器处理图片背景时的规律法子，利用这一规律咱们可以用一小块图片作为页面背景，让它主动在页面上重复排列，铺满全部页面，从而使网页的体积大大减小。

读者到现在恐怕都曾经晓得了沙纹背景的原理和完成法子，就是找一个小的图片，越小越好，但留意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。其完成的HTML语法如下：

＜bodybackground="picture"＞

其中的"picture"体现背景图片的URL路径。

3.条状背景

条状背景与沙纹背景是对比类似的，它适用于页面背景在程度或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。它也是利用涉猎器对图片背景的主动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。

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

＜bodybackground="picture"＞

将其设为页面背景，经涉猎器显现后，就成为全部页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的法子完成条状背景在程度方向上的重复排列。

4.照片背景

把自己或朋友的照片作为页面的背景让大家看到，是有点令人感动的事件，但涉猎器对图片的主动重复排列却使这一指望难以完成。怎样办呢？只有想不到的，没有做不到的，这里咱们用上一点简略的CSS。在网页文件的＜head＞……＜/head＞之间参加下面的CSS语句:

＜styletype="text/css"＞＜!--body{background-image:url(myphoto.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:50%50%}--＞＜/style＞

这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动涉猎器窗口的滚动条时，照片依然位于页面的正中间而不随页面内容一同滚动。如果你感觉照片位于页面的正中间不满意，你也可以随便地调剂它在页面中的地位，只要求调剂"background-position"的值就可以了。5.复合背景

如果你在练习上面的“照片背景”时“不警惕”也设置了＜body＞标签里的颜色背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显现出来。这就是复合背景的魅力，更为吸收人的是，当你所设置的图片背景由于某种不可知的要素而不能正常显现的时分，涉猎器能够主动用你所设置的颜色背景取而代之。它的设计法子，就不用我再多说了吧！

创新互联公司是一家集网站建设,霍尔果斯企业网站建设,霍尔果斯品牌网站建设,网站定制,霍尔果斯网站建设报价,网络营销,网络优化,霍尔果斯网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

网站栏目：网站建设过程中网页背景设计技术全攻略
文章位置：http://ybzwz.com/article/sphhpe.html