至顶网›软件频道 ›应用软件›利用CSS准确控制页面和元素背景

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

扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条

使用CSS指令控制背景元素有很多优势：它不需要任何特别的软件，它能在大部分浏览器上工作，它可以对网站的背景图像和颜色进行集中控制。

作者：builder.com.cn 2007年4月23日

关键字：

控制背景图像重现

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

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

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

Listing D

<html>

<head>

.header1 {

width: 100%;

height: 35%;

border: solid 2px red;

background-repeat: no-repeat;

}

.header2 {

width: 100%;

height: 60%;

border: solid 2px black;

background-repeat: repeat-x;

}

</style>

</head>

<body>

<p />

</body>

</html>

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

Figure D

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

Listing D 示例

控制背景图像位置

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

Listing E

<html>

<head>

.header {

width: 100%;

height: 80%;

border: solid 2px red;

background-repeat: no-repeat;

background-position: bottom right;

}

</style>

</head>