来源:www.cncfan.com | 2006-1-21 | (有2399人读过)
好的背景能够让网站变得很美妙。
--------------------------------------------------------------------------------
示例
好的背景和文字颜色:
<html> <body bgcolor="#d0d0d0"> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </p> </body> </html>
一个背景色和文字颜色让页面文本更易读的例子。
差的背景和文字颜色:
<html> <body bgcolor="#ffffff" text="yellow"> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </p> </body> </html>
一个背景色和文字颜色让页面文本不便阅读的例子。
在这个页面的底部,还有更多例子。
--------------------------------------------------------------------------------
背景
<body>标签有两个属性可以指定背景。背景可以是颜色,也可以是图像。
--------------------------------------------------------------------------------
bgcolor
bgcolor属性将背景设置为颜色,它的值可以是一个十六进制数、RGB值或者一种颜色名称。
<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
上面三条语句都可以把页面背景设置成黑色。
--------------------------------------------------------------------------------
background
background属性将背景设置为图像,它的值是你所要使用图像的URL地址。如果这个图像的大小不及浏览器窗口,它将平铺占满窗口。
<body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif">
URL地址可以是相对地址(上面第一条语句),也可以是绝对地址(上面第二条语句)。
注意:如果打算使用背景图像,应该牢记:
这个图像会使页面加载时间过长吗?小技巧:图像文件的容量尽量不要超过10K。 这个图像跟页面上其他图像协调吗? 这个图像跟页面上的文字颜色协调吗? 这个图像平铺了以后看起来还可以吗? 这个图像吸引了文字的注意力,喧宾夺主了吗?
--------------------------------------------------------------------------------
基本注意点——有用的技巧
<body>标签的bgcolor、background和text属性在最新的HTML标准(HTML4和XHTML)中已被废弃。W3C在他们的推荐中已删除这些属性。在HTML的未来版本中,层叠样式表(CSS)将被用来定义HTML元素的布局和显示属性。
一般的网站很少使用背景图像。
最常用的背景颜色是黑色、白色和灰色。
--------------------------------------------------------------------------------
更多示例:
好的背景图像:
<html> <body background="./images/background.jpg"> <h3>Image Background</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>
一个背景图像和文字颜色让页面文本易于阅读的例子。
好的背景图像2:
<html> <body background="./images/paper.gif"> <h3>Image Background</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>
另一个背景图像和文字颜色让页面文本易于阅读的例子。
差的背景图像:
<html> <body background="./images/rock.jpg"> <h3>Image Background</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>
一个背景图像和文字颜色让页面文本不便阅读的例子。
|