background-position

设定背景位置时可以使用三种值：关键字、百分比、绝对或相对单位的数值。可以使用两个值

分别设定水平和垂直位置。

关键字指的顺序不重要， left bottom 和bottom left 意思相同。为了设定的值在所有浏览器

中都有效，最好不要混用关键字值与数字值。

使用数值（比如 40% 30%）时，第一个值表示水平位置，第二个值表示垂直位置。要是只设定

一个值，则将其用来设定水平位置，而垂直位置会被设为 center。

在使用关键字和百分比值的情况下，设定的值同时应用于元素和图片。换句话说，如果设定了

33% 33%，则图片水平33%的位置与元素水平33%的位置对齐。垂直方面也一样。图3-37 所

示也是一个例子，那是通过 center center 把图片的中心点定位在了元素的中心点。

像素之类的绝对单位数值就不一样了。要是用像素单位来设定位置，那么图片的左上角会被放

在距离元素左上角指定位置的地方。

有意思的是，还可以使用负值。这样就可以把图片的左上角定位到元素外部，从而在元素中只

能看到部分图片。当然，给图片设定足够大的正值，也可以把图片的右下角推到元素外部，从

而在元素中也只能看到部分图片。位于元素外部的那部分图片不会显示。

 

 

 

 

文章内容有转载部分