CSS属性之background-position的用法

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

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

总的来说，background-position的参数设定方式是从简单到复杂，让我从简单的开始介绍：

使用语义明确的单词

水平方向：左（left），中(center)，右(right)

垂直方向：上（top），中(center)，下(bottom)

很明显，这种方式言简意赅，使用简洁而语义明确。

background-position: top center; // 从图片顶部开始，居中显示

background-position: top left; // 从图片顶部，靠左开始显示（左上角）

background-position: top right; // 从图片顶部，靠右开始显示（右上角）

background-position: bottom left; // 从图片底部，靠左开始显示（左下角）

background-position: bottom right; // 从图片底部，靠右开始显示（右下角）

更多例子

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



数值用法

这是一种对图片上需要显示的区域进行精确定位方法，用来实现CSS Sprites。

CSS Sprites就是将需要显示的多个图像排列到一个图片文件上，这样做的好处是可以减少图片数量，也就减少了HTTP请求次数，从而优化了网站的性能。一般来说，网站常用的图像资源，比如button，logo，icon都可以放到一张图片上。

举个例子，我们现在有一张图包含了很多icon，现在想要显示红色P那个icon，如图已经测量出红色P距离上边界和左边界的距离。



使用如下的设定，

.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的位置。

[b]可是为什么设的是负值呢？

[/b]这是因为HTML里的X轴向右是正值，Y轴向下是正值！



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

这个方式是不是很有用？通过设置偏移数值就能找到图片上需要显示的区域。

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



百分比用法

之所以百分比能解决上面的问题，因为它是一种表示相对偏移的方式，只要图片等比缩放，图像的相对位置是不变的。

其实百分比用法和数值用法很类似，都需要先测量想要显示的那块图像距离上边界和左边界的距离，另外还要测量整张图片的高和宽。

还是以上面的图片为例，它的宽（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%。

.icon {
    width: 125px; // 根据需要等比设定元素大小即可实现自适应
    height: 125px;
    background-image: url('../assets/images/icon_sprites.png');
    background-position: 50% 100%; // 偏移量设置为百分比
    background-size: 381px 509px; // 根据需要等比设定图片大小即可实现自适应
}

以上就是background-position的基本用法。

参考文档:

W3School CSS background-position 属性

CSS: Using Percentages in Background-Image