你真的了解background-position

今天看了大漠老师一篇关于background-position 的文章，让我对这个属性有了一个更好的认识。在这里跟大家讲讲我的一些理解

background-position是用来控制元素背景图片的位置。它接受三种值：
关键词，比如top、right、bottom、left和center
长度值，比如px、em、rem等
百分值%

这里重点来说一下百分值%

你真的了解background-position取值为百分比的计算比例吗？如果我的百分比值不是和关键词对等的值呢？那么它是怎么计算的？这一系列的问题，你是否有仔细的思考过。就我个人而言，我以前所理解也存在一个误区：

我一直理解的background-position百分比值，它是相对于背景图片的尺寸。

但事实上，这种理解是一种错误。这也是今天踩的坑发现的。然后立马查了一下相关的规范文档，才彻底的搞清楚。那接下来，咱们就来聊background-position取值为百分比的计算方式。

W3C规范是这样描述的：

当背景图片尺寸（background-size）不做任何的重置（也就是100% 100%）时，水平百分比的值等于容器宽度百分比值减去背景图片宽度百分比值。垂直百分比的值等于容器高度百分比值减去背景图片高度百分比值。

如上图的gif动画演示的。

如果把背景的位置设置为background-position: 75% 50%;，那么反应成px单位。这个背景图片的位置坐标就是410*75%-100*75% 其中410 是外部box的宽度 100 是背景图片的宽度

伙伴们了解了么？

欢迎大家加群共同交流学习：530425215