扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
作者：builder.com.cn 2007年4月23日
关键字：
控制背景图像滚动
最后，在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>
现在，当你试图滚动这个页面的时候，右上角的图像会相对于浏览器窗口保持固定，它不会随页面上的其它内容滚动下来。
|
Figure F |
|
Listing F 示例 |
当然，这些例子只是CSS背景应用中很小的一部分。然而，它们应该给了你一个在实际应用中使用这些属性的方法，你现在也应该能将这些属性应用到你的程序中了。所以，现在你还等什么呢？开始编写这些令人愉悦的代码吧！
责任编辑：德东
如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。
现场直击｜2021世界人工智能大会
直击5G创新地带，就在2021MWC上海
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
寻找自己的Flag
华为开发者大会2020（Cloud）- 科技行者
京公网安备 11010802021500号