背景图片滚动css background-attachment属性
【实例介绍】
背景图片滚动css background-attachment属性
当网页上设置背景图片时，随着滚动条的移动，背景图片也会跟着一起移动，可以使用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> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></td> </tr> </table> </body> </html>
【代码分析】
在浏览器中预览效果，如图所示，可以看到拖动浏览器的滚动条，网页的内容移动了，背景图像也随着移动。
【素材及源码下载】
请点击：背景图片滚动属性background-attachment 下载本实例相关素材及源码
……