CSS详解背景图片定位background-position介绍

前面361模板网已经对CSS的background-position属性做了介绍：《CSS样式代码：background-position 用法详细介绍》，今天这一讲，主要是对前面课程的补充介绍，大神飘过。

背景图片定位background-position用法详解：

background-position的写法：

1)关键字：background-position: left top;

2)像素：background-position: 0px 0px;

3)百分比：background-position: 0% 0%;

均表示将图片定位在左上角。第一个元素值指的是距离左边的距离，第二个元素值指的是距离上边的距离。但百分比与其他两种是有所区别的。

直接举例：

1.background:url(../image/header.jpg) no-repeat 30% 30%;

背景图片的(30%， 30%)的点与其所属的div的(30%， 30%)的点对齐。图片中的该定位点与元素中的定位点重合，即该元素其实设置了两个效果。

2.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/

表示背景图片在指定div的位置，从左上角开始

3.background:url(../image/header.jpg) no-repeat right bottom; /*相当于100% 100%*/

表示背景图片从指定div的右下角开始显示图片，并且背景图片右下角与div的右下角重合

4.background:url(../image/header.jpg) no-repeat 300px 200px;

即背景图片距div的左边界300px，距div的上边界200px。

5.background:url(../image/header.jpg) no-repeat 50% 50% ;

/* 相当于background:url(../image/header.jpg) no-repeat center ; */

背景图片在div中水平方向与竖直方向都居中显示

6.background:url(../image/header.jpg) no-repeat 300px; /*相当于300px 50%*/

若只写一个参数，则另一个参数默认为50%，即背景图片距div的左边300px，而竖直方向居中。

7.background:url(../image/header.jpg) no-repeat -300px -100px ;

背景图片相对于div左上角(0px，0px) 又向左移动了300px，向上移动了100px