当前阅读教程:CSS入门到精通 > background-attachment 属性 | |||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||
上一篇: background-repeat背景图像水平或垂直平铺 | 下一篇: background-position 背景图像定位 | ||||||||||||||||
标签定义及使用说明background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 注意: Internet Explorer 8和更早版本的浏览器不支持多个背景图像在一个元素 属性值
示例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>指定一个固定的背景图像</title> <!--定义内部样式--> <style> /*定义整个页面固定的背景图片*/ body{ /*定义页面背景图片,默认是平铺*/ background-image:url("img/bg.gif"); /*设定背景图片不重复,也就是只显示1张*/ background-repeat: no-repeat; /*设定背景图片固定*/ background-attachment: fixed; } </style> </head> <body> <!--定义多行文本;下来查看背景的效果--> <p>01.背景图片是固定的。尝试向下滚动页面。</p> <p>02.背景图片是固定的。尝试向下滚动页面。</p> <p>03.背景图片是固定的。尝试向下滚动页面。</p> <p>04.背景图片是固定的。尝试向下滚动页面。</p> <p>05.背景图片是固定的。尝试向下滚动页面。</p> <p>06.背景图片是固定的。尝试向下滚动页面。</p> <p>07.背景图片是固定的。尝试向下滚动页面。</p> <p>08.背景图片是固定的。尝试向下滚动页面。</p> <p>09.背景图片是固定的。尝试向下滚动页面。</p> </body> </html> 效果图 |
|||||||||||||||||
上一篇: background-repeat背景图像水平或垂直平铺 | 下一篇: background-position 背景图像定位 |