background-position

background-position属性

它有5个关键字：left、top、bottom、right和center。
任意两个组合都能作为该属性的值，比如top right表示将图片放在右上角的位置。

注意：该属性同时设定元素和图片的原点
原点：决定元素和图片中的某一点的水平和垂直坐。原点默认在左上角，也就是说元素和图片的左上角对齐

• 只设定一个关键字，则另一个也会也取相同的值

 background-color:center

这就相当于

background-color:center center

• 使用关键字和百分比
  在这中情况之下，设定的值同时作用于元素和图片。

• 使用像素等绝对单位
  那么就不一样了。要是使用像素来设定位置，那么图片的左上角会被距离元素左上角指定位置的地方。
  有意思的是，能取负值，这样就能把图片的左上角移到元素的外部，从而在元素中只能看到图片的一部分。
  用法：把特定位置的图片移动到元素中，再用text-indent=-9999px,偏移掉文字，这样就达到使用图片替换文字的效果。

.change_btn span{    /*display: block;*/    float: left;    width: 50px;    height: 23px;    overflow: hidden;    /*background: url(../img/btn_cartoon.gif) no-repeat;*/    /*text-indent: -9999px;*/    cursor: pointer;}.change_btn .pre{    /*background-position: 0 -400px;*/}.change_btn .next{    /*background-position: -30px -400px;*/}

.change_btn span{    /*display: block;*/    float: left;    width: 30px;    height: 23px;    overflow: hidden;    background: url(../img/btn_cartoon.gif) no-repeat;    text-indent: -9999px;    cursor: pointer;}.change_btn .pre{    background-position: 0 -400px;}.change_btn .next{    background-position: -30px -400px;}