CSS层叠样式表背景图片位置属性
如何把背景图片放在页面的中央?
我想设置背景图片的位置?
解释
用法:
background-position: center | top | bottom | top left | top center | top right | bottom left | bottom center | bottom right ; background-position: 50% 50%; background-position: 200 200; 定义:
这个标记是用来设置背景图片的最初位置。为保证正常工作,背景图片重复设置成 no-repeat(没有重复)。
可以把标记设置成以下的值。
a)center | top center | ... :这些值是用来定义图片最初位置的。就像这些给定的值 "top center"或者"top left"或者"top right"等类似的值。
b)50% 50% : 值是以50% 60%百分数来给定的。意思就是背景图片的最初位置是放在距离左页面50%、距离页面顶端60%的位置。
c)200 200 :值也可以按照像素来给定。
上述所有的值都是位于对象区域内,如果你是在div标记中设置,则区域50意味着从该div标签开始位置起50。
示例1: <div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat;
background-position: bottom center;"> 颜色名称 <br><br><br></div>
结果: 颜色名称
示例2: <div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat;
background-position: 50% 50%;"> 颜色名称 <br><br><br></div>
结果: 颜色名称
示例3: <div style="background-image: url('test3.jpg'); background-color: green; background-repeat: no-repeat;
background-position: 50 50;"> 颜色名称 <br><br><br></body>
结果: 颜色名称