CSS属性之background-position理解

在HTML中为了给指定元素增添不一样的效果，常常会使用到background-image（或background简写模式）属性，而背景图片的定位（background-position)去占据一定的作用。

那如何理解background-position呢？这个要根据其取值情况而定：（如下谈论的背景为图片no-repeat时）

方式1.background-position为位置名时，如下各种情况，以逗号分开：

center,center center, top left,top center,top right,center left,center right,bottom lefe,bottom center,bottom right;

如上，表示背景图片将位于指定元素（body，div）的相对位置；

方式2.background-position为百分数时，如下：

background-position:40% 60%;

如上，以背景图片的中心点为基点，以当期浏览器窗口大小为尺寸，表示此时该基点位于指定元素（body,div）的水平方向的40%位置，竖直方向的60%位置；将随浏览器的窗口变化而变化；

方式3.background-position为具体数值时：

background-position:45px 60px;

background-position:10px -70px;

如上，背景图片的左上角与指定元素(body,div)的左上角为参考点，45px  60px表示背景图片水平右移45个像素，竖直向下移60个像素；同理，数值取负数则表示，向相反的方向移动。这种方式主要用于取同一背景图片上的不同位置上的图标。