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属性结合使用，要不然默认情况下，小于元素面积的背景图像将会不断重复以覆盖元素。

hot：热门