CSS background-position设置背景图像位置
CSS设置背景图像位置
CSS的background-position属性,可以用于设置HTML文档中元素背景图像的位置。其用法及属性值如下表:
属性值 | 描述 |
---|---|
left | right | center & top | center | bottom | “|”符号表示或,“&”符号表示且,即“&”符号的左右边可进行两两组合,不能单独是左边的两个或右边的两个。如果只有指定一个关键词,其它的值默认为center。 |
x% y% | 用百分比的方式指定图像x轴的位置和y轴的位置,即水平和垂直方向的位置。在HTML文档中,文档的左上角或元素的左上角坐标为(0,0) |
xpx ypx | 用像素的方式指定图像x轴的位置和y轴的位置 |
inherit | 指定属性从父元素继承 |
background-position实例代码,及在线编辑器
<div id='xyz'></div>
<style>
#xyz{width:100%;height:100%;background-image:url("../../static/img/bmi.jpg");background-size:50px 50px;background-position:right top;background-repeat:no-repeat;}
</style>
实例代码提示
注意,在使用background-position属性来指定背景图像的位置的时候,应当与background-repeat属性结合使用,要不然默认情况下,小于元素面积的背景图像将会不断重复以覆盖元素。