背景图片滚动css background-attachment属性

2012/11/24 19:20:48作者：佚名来源：网络

移动端

【实例介绍】

当网页上设置背景图片时，随着滚动条的移动，背景图片也会跟着一起移动，可以使用background-attachment属性来控制背景图片是否随着Web页面(当内容比浏览器的窗口大，滚动条处于激活状态的时候)的内容滚动。

【基本语法】

background-attachment：scroll | fixed

【语法介绍】

background-attachment属性能够提供一种非常酷的效果。默认状态下，背景图片随着Web页面的内容滚动，这是background—attachment：scroll。如果以fixed代之，而且浏览器支持它，那么当页面滚动时背景图片会固定在一个地方。

【实例代码】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
.bj {
 font-size: 13px;
 line-height: 20px;
 background-image: url(bb.jpg);
 background-attachment: scroll;
 background-repeat: no-repeat;
}
</style>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bj"><p>林间只有清脆的虫鸣鸟唱，没有风却感觉得到丝丝的凉意。我置身山间的云雾缭绕里，雾气勾勒出我思绪，飘飘然，延绵无尽，深深一呼吸，品位一丝雾气的清爽，我希望它不要散去。 师父说人生也是一阵迷雾，慢慢散去，慢慢清晰，无须慌乱，无须贪恋，无须奢望，因为它已经在那里等你了，静静地等着你，这就是宿命。</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
</body>
</html>

【代码分析】

在浏览器中预览效果，如图所示，可以看到拖动浏览器的滚动条，网页的内容移动了，背景图像也随着移动。

背景图片滚动属性background-attachment运行效果