利用CSS准确控制页面和元素背景

网络整理 - 07-27

在CSS出现以前，Web开发者只能对页面和背景元素进行少量的控制。当然，那时候他们能使用background属性将一个图像在整个页面上进行平铺，他们能用bgcolor属性来控制图像的背景颜色。但是他们的控制仅仅这些——例如，他们不能调节页面背景图像的位置，不能控制平铺（tiling），也不能生成页面水印。

现在有了CSS，这些都得到了改变，它可以通过一组background-*指令准确控制页面和元素背景。另外，它还提供了大量优化了的函数。使用CSS指令控制背景元素有很多优势：它不需要任何特别的软件，它能在大部分浏览器上工作，它可以对网站的背景图像和颜色进行集中控制。

听起来是不是很有趣？接下来，我们来看看这些是怎么回事，这篇文章介绍了CSS的background属性，这个属性为老的background属性提供了另外一个选择，它对控制页面和元素背景的位置、颜色和布局来说是一个非常好的工具。

控制背景颜色

首先，让我们来看看背景颜色属性，该属性定义了元素所应用的背景颜色。这个指令既可以接受十六进制的RGB值，也可以接受像red、silver或者blue这样的“颜色单词”。ListingA给了我们这样的一个示例：

Listing A

<html>

<head>

.author {

background-color: #FFE303

}

.quote {

font-style: italic;

background-color: lime

}

</style>

</head>

<body>

<div class="author">William Shakespeare said:</div>

<p />

<div class="quote">To be or not to be, that is the question.</div>

</body>

</html>

它运行后的结果如Figure A所示：