软件学堂

网游分类软件分类

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

2012-11-24 来源:网络

【实例介绍】

背景图片滚动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>&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运行效果

 【素材及源码下载】

请点击:背景图片滚动属性background-attachment 下载本实例相关素材及源码

 

上一篇:背景图片重复css background-repeat属性
下一篇:背景图片定位css background-position属性

相关文章