当前阅读教程:CSS入门到精通 > background-position 背景图像定位 | |||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||
上一篇: background-attachment 属性 | 下一篇: CSS Text(文本) | ||||||||||||||||||
标签定义及使用说明background-position属性设置背景图像的起始位置。 注意对于这个工作在Firefox和Opera,background-attachment必须设置为 "fixed(固定)".
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。 注意: IE8 及更早的浏览器版本不支持一个元素有多个背景图片。 属性值
示例设定背景图片居中,不会随下拉的改变而改变 代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>background-position 背景图像定位</title> <!--定义内部样式--> <style> /*定义整个页面固定的背景图片*/ body{ /*定义页面背景图片,默认是平铺*/ background-image:url("img/bg.gif"); /*设定背景图片不重复,也就是只显示1张*/ background-repeat: no-repeat; /*设定背景图片固定*/ background-attachment: fixed; /*设定背景图片位置:居中*/ background-position: center; /* 可以使用下面语句:使用%设置页面上的图像位置 background-position: 30% 20%; 可以使用下面语句:使用像素设置页面上的图像位置 background-position: 50px 100px; */ } </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-attachment 属性 | 下一篇: CSS Text(文本) |