CSS属性之background-position的用法

最新推荐文章于 2024-06-27 07:29:40 发布

weixin_34307464

最新推荐文章于 2024-06-27 07:29:40 发布

阅读量362

点赞数

文章标签： python

原文链接：https://my.oschina.net/zombiecat/blog/425469

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

可是为什么设的是负值呢？
这是因为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; // 根据需要等比设定图片大小即可实现自适应
}
```