2024-09-20
网页背景设计在网页设计中起着至关重要的作用,它可以为网页营造出独特的氛围,提升用户体验。
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"的值就能够了。
5.复合布景
假如你在操练上面的“相片布景”时“不小心”也设置了<body>标签里的色彩布景,那么你看到了什么?色彩布景还起作用吗?对,你能看到你的相片浮于你设的色彩布景之上,二者能够一同正常地显现出来。这便是复合布景的魅力,更为吸引人的是,当你所设置的图片布景由于某种不可知的因素而不能正常显现的时候,浏览器能够主动用你所设置的色彩布景取而代之。它的规划办法,就不用我再多说了吧!
6.部分布景
前面咱们所说的布景都是整个页面的布景,能不能在页面上为某个部分的内容设置归于它自己的布景呢?答复是必定的。
为常见的是在表格的规划当中,咱们可认为表格设置一个不同于页面的布景,甚至在不同的表格单元中,咱们也能够设置各个表格单元自己的布景。请看下面这个表格比如:
<table border="1" width="240" height="101" bgcolor="#C0C0C0">
<tr>
<td width="80" height="46" bgcolor="#00FFFF"></td>
<td width="80" height="46"></td><td width="80" height="46" bgcolor="#00FF00"></td>
</tr>
<tr>
<td width="80" height="47" bgcolor="#FFFF00"></td>
<td width="80" height="47" bgcolor="#FF0000"></td>
<td width="80" height="47" bgcolor="#FF00FF"></td>
</tr>
</table>
在浏览器中的显现作用如图所示,能够看到,不但关于表格整个来说有不同于页面的布景,便是每一个单元格也能够设置各不相同的布景。
除此之外,咱们还能够单独为某个文字阶段设置布景,甚至为这个文字阶段中的某几个文字设置自己的布景,是不是有点适当不错,这也需求用上一些CSS。请先看一下下面的这个比如:
<HTML><HEAD><TITLE>不仅仅是页面的布景</TITLE><STYLE TYPE="text/css"><!--BODY{BACKGROUND:#FFFFDD;COLOR:red}div{BACKGROUND:red;COLOR:white}--></STYLE></HEAD><BODY><P STYLE="BACKGROUND:black url(../images/bg.jpg);COLOR:black}">
记得毛主席有这么一首诗:"<div>坐地日行八万里,巡于遥看一千河。</div>"伟人便是了不起,……几万里就出去了。</P></BODY></HTML>
在浏览器中的显现作用如图所示,现在是不是有点兴奋了,啊,本来文段也能够有自己的布景。只需你乐意,你就可认为页面的任何一个部分界说自己的布景,从而把页面打扮得更加漂亮和吸引人。
说到这,关于网页布景规划的问题也就说得大约也就差不多了,但新的网页制造技术也在不断涌现,说不定今天你看了这篇文章,明日就觉得它太过期了。笔者写这篇文章,目的是引起广大网页制造者对布景规划的留意,究竟,布景对网页来说实在是太重要了,当然,网站仍是要以内容为榜首的。通过合理的设计和优化,可以使网页背景成为吸引用户、传达信息的重要元素。