background-positoin详解

如何使用背景图片位置

 .block {
            margin: 0 auto;
            border: 5px solid yellow;
            width: 600px;
            height: 600px;
            background:no-repeat url(./img/demo1.jpg);
            /*background: url(./img/demo1.jpg) no-repeat  scroll 10px 100px ;*/
            background-size:100px 100px ；
            position: relative;
            background-position: 100% 100%;

• 上面代码中当未设置no-repeat属性时，背景图片会以给它设置的图片大小平铺的占满整个父容器，超出部分隐藏，如果设置了该属性就只会显示一张。两种结果如下：
  
  
  注意：
  1.设置或检索对象的背景图像位置时（背景图片定位属性），必须先指定background-image属性
  2.该定位属性不受给对象设置的补丁属性（padding）的影响，默认值为0% 0%
  3.如果只指定了一个值，该值将用于横坐标，纵坐标将默认为50%；若指定了两个值，则第二个值就用于纵坐标,原点坐标默认为父容器的左上角

  情况举例：

  1. background-position: -100px -100px;//背景图片分别向左和上移动一个单位，则图片就会显示不见

  2. background-position:100px 100px;//图片向右下方移动一个单位
     

  3. background-position:100% 100%//图片处于容器元素右下角，与background-position:right bottom;效果等同
     

  4. background-position:50% 50%;//图片水平和垂直居中。与backgrond-position:center center;效果等同
     当x和y用百分号表示时等同于：
     x = {容器（block）的宽度 - 背景图片的宽度} * 百分比。
     y = {容器（block）的高度- 背景图片的高度} * 百分比。
     

  5. background-position:-50% -50%
     x和y又表示为
     x = -{容器（block）的宽度 - 背景图片的宽度} * 百分比。
     y = -{容器（block）的高度- 背景图片的高度} * 百分比。

  6. background-size:600px 600px ; background-position:100px 100px;
     //背景图片和容器一样大时