网站颜色和背景属性
作者：佚名 时间：2014-03-15
网站文档中的每个元素都有一种前景颜色和一种背景颜色。在有些情况下，背景不是颜色，而是一幅色彩丰富的图像。color和background样式属性控制着这些颜色和图像。
HTML/XHTML无素的子元素通常会从它们的父元素那里继承前景色颜色。例如，如果将
文本定为红色，能够识别样式的浏览器也将标题和段落文本显示为红色。然而背景属性行为与之不同，它们不能被继承。相反，每个元素都有一个默认的透明背景，允许父类背景透过其展现出来。这样，设置
标签的背景图像时，不会出现为标签的每一个元素重新装载该图像的情况。反之，浏览器只加载一次图像，并在文档其余部分的后面显示它，这样，所有那些本身没有明确的背景颜色或图像的元素都会以该图像作为背景。background-attachment属性
如果为某元素指定了一个背景图像，可用background-attachment(背景附件)属性来控制图像链接到浏览器显示窗口的方式。如果使用默认值scroll，当用户在整个文档内滚动时，浏览器会随着元素移动背景图。fixed值则能防止图像的移动。浏览器都支持这个基本的属性。
background-color属性
background-color属性控制的是元素的背景颜色（你猜对了！）。要将它设置为一个颜色值或关键字transparent（默认值）。其效果应该是透明的。
我们习惯于用
标签的特殊属性来为整个文档设置背景颜色，而background-color样式属性可以应用于任何元素。例如，要设置项目列表中某项的背景颜色，可以使用：同样，文档中所有表头的单元格可以用下面的代码来设定反白效果：
th{background-color: black; color: white}
如果真的需要突出强调文本，并将其背景设定为红色，可以命名用下列代码：
em {background-color: red}
浏览器以前的版本没有明确地支持css2属性，但是通过它支持的一般background属性也可以行到同样的效果，如以上所描述的那样。
background-image属性
background-image属性可以在元素内容后面放置一个图像。它的值可以是一个URL，也可以是关键字none(默认值)。
与背景颜色一样，也可以在整个文档后面，或者在文档中选中的元素后面放置一个背景图像。通过利用这相样式属性，诸如在表格或选中文本后面放置图像的效果，现在就很容易实现了：
li.marble{background-image: url(backgrounds/marble.gif)}
第一个示例用的是内联样式，将一个图像放在了表格后面。第二个示例定义了一个列表项目类，将一个大理石（marble）背景放在了使用class=marble属性
- 标签后面。例如，下列示例是XHTML中的一段代码：
这行代码将在网站中产生如下图所示的效果。
如果图像比包含元素大，它将被裁剪为与元素所占区域的大小相同。如果图像比该元素小，将重复使用该图像来填满元素所占的位置，background-repeat属性值指明了这一点。
可以用background-position属性来控制图像在元素内的位置。图像的滚动行为则由background-attachment属性管理。
当背景颜色和背景图像看起来不协调时，即使正在使用背景图像，通常也应该定义一种背景颜色。那样的话，如果图像不可用，例如，当用户不能自动下载图像时，浏览器会显示背景色来代替背景图像。此外，如果背景图像有透明区域，背景色可以用来填充那些区域。
background-position属性
默认情况下，能够识别样式的浏览器将从分配的显示区域的左上角开始放置背景图像，并将较低平铺到同一区域的右下角。使用background-position属性时，可以根据背景图像的默认位位置，将其起如位置向下或向右移动一个绝对（长度）或相对（百分比或关键字）的偏移量距离。结果，该图像将从偏移的起始点开始填充，而且平铺会从该点开始由左向右、由上到下的填充显示空间。
可以为background-position属性指定一个或两个值。如果用的是一个值，它将同时应用于垂直和水平位置。如果是两个值，那么第一个值表示水平偏移，第二个值表示垂直偏移。
对于在其后面显示背景图像的元素来说，长度值指明了相对于该元素左上角而言的绝对距离。
例如：
table{background-image: url(backgrounds/marble.gif);
background-position: 10px 20px}
上述代码以文档中任何
元素的左上角为基准，将背景向右偏移了10个像素，向下偏移了20个像素。
使用百分比值需要相对较多的技项，但却更容易使用一些。从左到右、从上到下地以0%-100%的范围进行计算，结果是，元素的内容显示空阐的中央位置是50%和50%。与此类似，这块区域的偏右三分之一和偏下三分之二分别是33%和66%。因此，以上面示例中的网站建设类型为例，要将其移动到元素内容显示空间的中心，可以使用以下代码：
background-position:50% 50%
注意，浏览器把第一张marble.gif图像平铺在内容显示区域的中央，并向窗口的右下方面进行了平铺。但是，如果只用一个词就可以达到同样的效果，为什么还要使用数字呢？因此，可以使用关键字left、center和right，以及top、center和bottom，它们分别代表0%、50%和100%。要将图像放在标签内容区域的中央位置，可以使用如下代码:background-position: center center
可以混合使用长度和百分比值，那么：background-position: 1cm center
这行代码将把图像放在标签左边缘向各的方向1厘米处，并在标签区域中垂直居中的位置。
background-repeat属性
浏览器通常会平铺背景来充充分配的区域，也就是水平和垂直方向向上重复显示该图像。使用background-repeat属性可以改变这种“repeat(重复)”行为。如果要图像只在水平方向重毛毛虫而垂直方面不毛毛虫复，可使用repeat-x值。如果只想在垂直方向上重复，可使用repeat-y值。如果要禁止重复，可以使用no-repeat值。
这个属性的通常用法是在页面的北京上放置一个水印或标记，而不必一次又一次地重复这个图像。例如，下列代码将在页面中央的背景上放置水印图像：
body{background-image: url(backgrounds/watermark.gif);
background-position: center center;
background-repeat: no-repeat;
}
一种流行的技巧是沿着页面的右边创建一条垂直的带子：
body {background-image: url(backgrounds/ribbom.gif);
background-position: top right;
background-repeat: repeat-y
}
