站长论坛

标题: 利用CSS准确控制页面和元素背景 [打印本页]

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

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

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

控制背景颜色

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

Listing A

<html>

<head>

<style type="text/css">

.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所示：

作者: tznktg 时间: 2007-9-24 09:20
Figure A

Listing B 示例

你也可以为一个特殊元素指定它的URL，就如Listing C所示：

Listing C

<html>

<head>

<style type="text/css">

.header {

width: 100%;

height: 60%;

border: solid 1px red;

background-image: url('mylogo.gif');

}

</style>

</head>

<body>

<div class="header"></div>

</body>

</html>

运行的结果如Figure C所示：

作者: tznktg 时间: 2007-9-24 09:21
Figure C

Listing D 示例

控制背景图像位置

它也可能控制背景图像相关元素放置的位置。background-position指令既可以接受百分比，也可以接受长度，还可以接受像top, bottom, left, right和center这样的关键字。现在我们来看看它是如何工作的，如Listing E所示，在这个示例中将背景图像放置在容器元素的右下角。

Listing E

<html>

<head>

<style type="text/css">

.header {

width: 100%;

height: 80%;

border: solid 2px red;

background-image: url('mylogo.gif');

background-repeat: no-repeat;

background-position: bottom right;

}

</style>

</head>

<body>

<div class="header"></div>

</body>

</html>

Figure E就是上面程序运行的结果：

作者: tznktg 时间: 2007-9-24 09:22
Figure E

Listing F 示例

当然，这些例子只是CSS背景应用中很小的一部分。然而，它们应该给了你一个在实际应用中使用这些属性的方法，你现在也应该能将这些属性应用到你的程序中了。所以，现在你还等什么呢？开始编写这些令人愉悦的代码吧！

欢迎光临站长论坛 (http://tzlink.com/bbs/)