[译]CSS-理解百分比的background-position

riskers commented 8 years ago

译文地址

通过这篇文章能够深刻理解 background-position 的百分比。

正文开始:

通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的background-position值来解决一些问题。

通常使用方法

摆放图片

通常在容器里摆放图片是给出具体图片的top、left相对容器的top、left的值。

在CSS中很容易做到。
- 在容器里使用<img>标签
```
.container{
    position:relative;
}
.container img{
    position:absolute;
    top:12px;
    left:20px;
}
```
- 或者可以使用background-position
```
.container{
    background-position:12px 20px;
}
```
在容器里移动

现在你想让图片在容器里面移动而且还不能超出容器边界。你肯定是要简单算一算图片top、left的最大值。

然后得到left值的范围是 0 到 container_width - image_width，同样也可以得到top值的范围。
图片比容器大

到目前为止，我们讨论的问题都很简单。现在，我们要看看图片比容器大的情况。容器必须要被图片填满。

同样我们可以算出left值的范围是 0 ~ container_width - image_width，只不过这次container_width - image_width 是负值。

你可以搞明白正值和负值的关系，也可以凭直觉搞定。当你看到12px 20px你很容易知道图片是怎么放置的。但是，你看到-12px -20px就比较难想明白了。
不变量

好了，现在你已经写好了位置点并且没有任何问题。现在，因为某些原因，我们不用长方形容器了，用正方形容器。那么之前的那些位置值就不那么合适了。

我们之前计算的值不再有效，因为现在情况变了。你想要改变图片和容器大小也是一样的道理。

可以从图中看到，如果使用固定的值，那么一旦改变某些条件，那么就可能会让已经写好的布局乱掉。

背景图片的百分比方法

定义

我们要换一个确定图片位置的方法了。当图片的左边框和容器的左边框挨着时，left是0%。当图片右边框和容器的右边框挨着时，left是100%。

这两个例子分别就是 0% 和 100% 的情况：

我们很容易得到两者之间的值
```
left = (container_width - image_width) * percentage
```
范围检测

这个方法最方便的就是我们不用再算图片相对容器的范围。它就是 0 ~ 100 。
不变量

我们画两个轴，一个对于容器，一个对于图片。如果我们设置值为60%，则两个轴的60%会重合在一个点上。

就像上面的图片一样，这个新的方法在不同比例大小情况下也工作得很好。
水平和垂直

如果你细心的话你会注意到图片和容器一样大的话，两个轴会完全重合。设置 30% 还是 80% 都不重要。

再看看数学公式
```
left = (container_width - image_width) * percentage = 0 * percentage = 0 
```
你只需要设置两个值left、top就行了。

总结

一开始，我没有明白百分比值是怎么对background-position作用的。我真的有点迷惑，因为使用百分比让我不能直观地感受到变化。然而，后来我发现使用百分比解决图片定位是极其方便的。

向我捐助 | 关于我 | 工作机会

Teemobustin commented 8 years ago

Nice demonstration, using drawings to illustrate this makes so much sense.

riskers commented 8 years ago

@Teemobustin I've been trying different methods.This method is the author's, not mine.I just moved the figure down. You can see me this way, because the computer drawing too much trouble.

brookslee commented 8 years ago

图文并茂，不过作者反而把我说迷糊了，标准文档说得更明白些: https://www.w3.org/TR/css3-background/#the-background-position

任何CSS属性值为percent时，都需要根据某个参考值进行计算，搞明白这个参考值是什么，理解就容易多了:

Percentages: refer to size of background positioning area minus size of background image

标准规定：background-position:perenct的参考值为: (容器宽度 - 背景图片宽度).

一个简单例子：容器宽度400px, 图片宽度100px, 当background-position-x为10%时，意味着背景图片左上角位于容器左上角 (400-100)*10% = 30px 处，也就是说背景图片的(0, 0) 坐标需要与容器(30px,0)坐标重合。

bravelincy commented 7 years ago

图片画得太草了

ghostogre commented 6 years ago

good job

riskers / blog

[译]CSS-理解百分比的background-position #9

通常使用方法

背景图片的百分比方法

总结