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

2022-07-15 80酷酷网 80kuku.com

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

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;
}
</style>
</head>
<body>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p />
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
</body>
</html>