2.2.33 CSS背景属性(四)背景图像位置：background-position

（背景图像属性）

背景属性  背景图像位置

希望背景图像出现在指定位置，就需要另一个CSS属性—background-position，设置背景图像的位置。

在CSS中，background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，例如上面的“right bottom”，默认为“0 0”或“top left”即背景图像位于元素的左上角

background-position属性的取值有多种，具体有以下三种情况：

 使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐

标，例如background-position:20px 20px。

 使用预定义的关键字：指定背景图像在元素中的对齐方式。 水平方向值：left、center、right。 垂直方向值：top、center、bottom。

 使用百分比：按背景图像和元素的指定点对齐。 0% 0%表示图像左上角与元素的左上角对齐。

50% 50%表示图像50% 50%中心点与元素50% 50%的中心点对齐。 20% 30%表示图像20% 30%的点与元素20% 30%的点对齐。

100% 100%表示图像右下角与元素的右下角对齐，而不是图像充满元素。

接下来通过案例演示元素背景图像位置的设置方法，具体CSS代码如下：

body{ }

background-image:url(img/wdjl.jpg); /*设置网页的背景图像*/ background-repeat:no-repeat; /*设置背景图像不平铺*/

background-position:300px10px; /*用像素值控制背景图像的位置*/

网页效果如下图所示