站长帮助

主要是针对用户提出的问题说明怎样使用好背景颜色和图片。根据我的小小经验，使用css来进行定义比较方便、准确，而且在多个表格内使用时，效果更显著。

什么是css？
在blog的代码上，一般可以见到形如以下的代码

以下内容为程序代码: <style type="text/css"> <!-- .diary_datetitle {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10pt; font-weight: bold; color: #858585; background-color: #F0F0F0} .line {  border-color: black black #CCCCCC; border-style: dotted; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px} td {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 9pt} .tt_title {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 20px; font-weight: bold} ...... --> </style>

注意是这些定义要插在<style type="text/css">与</style>之间

最简单，如果要设置整个页面的背景。你可以在css中添加一项
body {background-color:yellow}
那么整个页面的背景就是黄色了

或者自定义blog描述所在的表格表格
.abc {background-color:white}
然后在blog的blog描述所在表格内加上：
<td class=abc>#dis_tag#</td>
那么，blog描述的背景就是白色了。关键就是搞清楚这部分的意思，设置背景方法相同


以下是设置背景用到的定义项：

·背景颜色 background-color
上面已说明，不用多说了

·背景图片 background-image

例：body{background-image:url('http://www.abc.com/bg.gif')}
意思就是整个页面的背景为图片，图片地址是：http://www.abc.com/bg.gif 这种情况下，没有为图片加任何定义，背景图片会在浏览器内任何地方不断重复排列，就像我们设置windows的壁纸。下面说的就是如何对背景图片的属性进行定义' target=_blank>http://www.abc.com/bg.gif。这种情况下，没有为图片加任何定义，背景图片会在浏览器内任何地方不断重复排列，就像我们设置windows的壁纸。下面说的就是如何对背景图片的属性进行定义

·图片是否重复显示 background-repeat

例：
body{background-image:url('http://www.abc.com/bg.gif')  background-repeat:no-repeat}
背景图片不重复排列，只显示一次。一般是用于较大面积的图片，并多与下面列出的各定义项配合使用

例：body{background-image:url('http://www.abc.com/bg.gif')  background-repeat:repeat-x}
背景图片只在水平方向重复排列
例：body{background-image:url('http://www.abc.com/bg.gif')  background-repeat:repeat-y}
背景图片只在垂直方向重复排列
以上两项很少用到。

·定位图片显示位置 background-position

图片出现在背景的某个地方，也是从水平方向和垂直方向定义。
水平方向值：left|center|right
垂直方向值：top|center|bottom
例子：body{background-image:url('http://www.abc.com/bg.gif')  background-repeat:no-repeat; background-position:right bottom}
也就是图片出现在右下角且不重复

亦可以使用具体数值来定义
例子：body{background-image:url('http://www.abc.com/bg.gif')  background-repeat:no-repeat; background-position:100px 50px}
图片就会出现在距浏览器左边缘100象素 右边缘50象素的地方出现


·控制图片是否滚动 background-attachment

如上面的一例，图片出现在100px 50px的位置，但当滚动条向下滚动的时候，图片就依然停留在原来的位置，也就是看不到背景图片，这时候就需要用到background-attachment了。主要是使用一个值：fixed

body{background-image:url('http://www.abc.com/bg.gif')  background-repeat:no-repeat; background-position:100px 50px;background-attachment: fixed}



就是这些定义值，至于表格内的背景图片设置也是一样，只是位置的相对参考由浏览器，变成表格的边缘而已。动手试一试就很容易明白。