扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
作者：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>
<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 示例 |
不必说，在放置单个背景图像时候，例如，在网页上放置公司图标的时候，这个指令是非常有用的。
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
京公网安备 11010802021500号