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

tznktg · 发表于 2007-9-24 09:19:19

在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:21

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:16

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:10

Figure E

Listing F 示例

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

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

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

相关帖子

浏览过的版块