首页 > > 网页制作 > css >

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

2008-02-23 08:39:12来源：互联网阅读 ()

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

Figure A

Listing A的示例

控制背景图像

如果你想使用背景图像来替代单一的颜色，可以使用background-image指令，这个指令允许你指定背景图像的URL。

Listing B

<html>
<head>
<style type="text/css">
body {
background-image: url('mylogo.gif');
}
</style>
</head>
<body>
</body>
</html>

Figure B就是它运行后的结果：

Figure B

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

Figure C

Listing C 示例

控制背景图像重现

默认地，background-image指令可以对所选择的图像进行水平和垂直方向两个方向上的平铺。通常，这些才是你想要的——在先前的例子中，假如你想使用公司的logo作为背景，同时可以控制它只出现一次，或者，只将背景图像设计成了垂直方向的。

对于所有的这些情况，CSS提过了background-repeat指令，这个指令接受下面四个值之一：repeat-x (只在水平方向重复), repeat-y (只在垂直方向重复), no-repeat (没有重复), and repeat (在水平和垂直两个方向重复)。

下面来看看它的实现，如Listing D所示，在第一个<div>中将平铺（tiling）关闭了，也就是不进行重复，在第二个<div>中将logo水平重复。

Listing D

<html>
<head>
<style type="text/css">
.header1 {
width: 100%;
height: 35%;
border: solid 2px red;
background-image: url('mylogo.gif');
background-repeat: no-repeat;
}
.header2 {
width: 100%;
height: 60%;
border: solid 2px black;
background-image: url('mylogo.gif');
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="header1"></div>
<p />
<div class="header2"></div>
</body>
</html>

Figure D给我们展示了它的运行结果：

Figure D

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就是上面程序运行的结果：

Figure E

Listing E 示例

不必说，在放置单个背景图像时候，例如，在网页上放置公司图标的时候，这个指令是非常有用的。

控制背景图像滚动

最后，在CSS中，你可以设置在容器元素滚动的时候背景图像是否滚动。这个应用大部分使用在水印网页上，它使用background-attachment指令，可以接受scroll 或者fixed这两个值。Listing F这个例子告诉你如何产生一个出现在页面右上角的水印。

Listing F

<html>
<head>
<style type="text/css">
body {
background-image: url('mylogo.gif');
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有