最近评论
正在载入评论列表...
4.5 文档背景图片粘连方式background-attachment
属性值：scroll | fixed | 继承值
初始值：scroll
作用于：所有元素
是否继承：否
百分比值：不适用
计算值：用户指定的关键字
对于默认HTML样式而言，一旦文档显示范围超过当前显示容器，浏览器就会提供滚动条以便浏览。而当用户拖动滚动条浏览文本的时候，背景图片会随着文本一起滚动，即默认的“scroll”属性值。用“粘连”这个词可以非常形象地描述这种依附方式。
如果设计者想要让背景图片永远固定在下层，无论上层文本怎样滚动，背景图片都静止不动，就需要使用background-attachment属性，添加“fixed”属性值就能够满足要求。
示例4.8演示了锁定背景图片的方法。
示例4.8
<html>
<head>
<title>CSS Demo</title>
<style>
body { background-image: url(santa.jpg);
background-attachment: fixed; }
</style>
</head>
<body>
<p>对于默认HTML样式而言，一旦文档显示范围超过当前显示容器，浏览器就会提供滚动条以便浏览。而当用户拖动滚动条浏览文本的时候，背景图片会随着文本一起滚动，即默认的“scroll”属性值。用“粘连”这个词可以非常形象地描述这种依附方式。
<p>如果设计者想要让背景图片永远固定在下层，无论上层文本怎样滚动，背景图片都静止不动，就需要使用background-attachment属性，添加“fixed”属性值，就能够满足要求。
</p>
</body>
</html>
本书插图为静态图片，无法显示背景粘连的效果，请查看本书配套增值包的示例4.8。
在Dreamweaver 8中，设置背景图片粘连方式可以在定义背景图片的同时进行定义，具体方法如图4.16所示。
图4.16 在Dreamweaver 8中设置背景图片粘连方式
图书导读
