(图片由百度提供,仅供参考)

      这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。

提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

作为CSS中使用图片时会用到的属性,background-position的使用频率是很高的,它的作用就是设定某元素背景图像的初始位置。并且它有三种设定参数的方式,虽然这三种方式可以混合使用,不过我一般针对不同场景使用对应的参数设定方式。虽然官方文档上叙述了这三种方式,可是依然有些地方让我费解,特别是百分比的设定,经过实践,发现一个公式来计算需要设定的百分值,我会在后面详细阐述。

关于background-position的工作原理,我的理解是将图片上需要显示出来的区域相对于元素的左上角,也就是坐标点(0,0)进行水平和垂直方向偏移。

总的来说,background-position的参数设定方式是从简单到复杂:

 

  1. 使用语义明确的单词
    水平方向:左(left),中(center),右(right)
    垂直方向:上(top),中(center),下(bottom)
    很明显,这种方式言简意赅,使用简洁而语义明确。
  2. 如果您仅规定了一个关键词,那么第二个值将是"center"。

    默认值:0% 0%。

  3. 第一个值是水平位置,第二个值是垂直位置。

    左上角是 0% 0%。右下角是 100% 100%。

    如果您仅规定了一个值,另一个值将是 50%。


    background-position: top center; // 从图片顶部开始,居中显示
    background-position: top left; // 从图片顶部,靠左开始显示(左上角)
    background-position: top right; // 从图片顶部,靠右开始显示(右上角)
    background-position: bottom left; // 从图片底部,靠左开始显示(左下角)
    background-position: bottom right; // 从图片底部,靠右开始显示(右下角)

    采用这种方式来显示图片,一般情况是为了显示整个图片文件上的内容,比如页面的背景图,换句话说,图片文件上就只有一个图像需要显示,然后使用这种方式来进行大概的定位操作,比如需要居中的将背景图片显示出来。

  4. 数值用法
    这是一种对图片上需要显示的区域进行精确定位方法,用来实现CSS Sprites(详见W3Cschool)。
    CSS Sprites就是将需要显示的多个图像排列到一个图片文件上,这样做的好处是可以减少图片数量,也就减少了HTTP请求次数,从而优化了网站的性能。一般来说,网站常用的图像资源,比如button,logo,icon都可以放到一张图片上。
    举个例子,我们现在有一张图包含了很多icon,现在想要显示红色P那个icon,如图已经测量出红色P距离上边界和左边界的距离。

    使用如下的设定,
    1
    2
    3
    4
    5
    6
    .icon {
        width: 125px; // 首先创建一个长宽为125px的容器元素
        height: 125px;
        background-image: url('../assets/images/icon_sprites.png'); // 设置这个元素的背景图片
        background-position: -128px -384px; // 设置偏移量
    }

    就可以显示出红色P了。


    很神奇吧,我们可以这样理解,刚创建的容器元素是一个从这张图片(0,0)坐标开始的一个相框,这个相框的大小是固定的125px,所以如果不设置background-position,也就是不设置任何偏移,看到的就是左上角那个icon。

    所以图片需要向上384px,向左128px才能移动到红色P的位置。

    可是为什么设的是负值呢?
    这是因为HTML里的X轴向右是正值,Y轴向下是正值!

    而刚才我们的图片需要向左向上移动,正好在两个维度都需要反向移动,所以为负值。

    这个方式是不是很有用?通过设置偏移数值就能找到图片上需要显示的区域。
    注意,这个方式存在一个问题,因为设定的偏移值都是固定的,导致没法做到图像自适应。我们在实现实现响应式设计时,图片的大小会根据浏览器视口的大小进行缩放调整,而图片的大小改变之后,偏移位置就需要改变,换句话说,图片大小一调整,我们想要显示的图像的位置在数值上也会改变。为解决这个问题,我们得用百分比的方式。

  5. 百分比用法
    之所以百分比能解决上面的问题,因为它是一种表示相对偏移的方式,只要图片等比缩放,图像的相对位置是不变的。
    其实百分比用法和数值用法很类似,都需要先测量想要显示的那块图像距离上边界和左边界的距离,另外还要测量整张图片的高和宽。
    还是以上面的图片为例,它的宽(X轴)是381px,高(Y轴)是509px,红色P的X轴偏移值是128px,Y轴偏移值是384px,红色P是长度为125px的正方形。
    看到这里心想X轴的百分比偏移量就是 128px/381px ≈ 33.5958%,Y轴 384px/509px ≈ 75.442%,然后设置background-position: 33.5958% 75.442%; 


    实际上,经过实践发现,它用的另一个公式来计算
    X轴百分比:X轴偏移值 / (图片宽度 - 要显示图像的宽度) * 100
    Y轴百分比:Y轴偏移值 / (图片高度 - 要显示图像的高度) * 100
    应用到例子:X轴为128px / (381px - 125px) = 0.5,Y轴384px / (509px - 125px) = 1,因此结果就是50%和100%
以上就是background-position的基本用法。