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

[riskers]

译文地址

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

正文开始:

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

通常使用方法

1. 摆放图片

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

   

   在CSS中很容易做到。

   • 在容器里使用<img>标签

     .container{
     	position:relative;
     }
     .container img{
     	position:absolute;
     	top:12px;
     	left:20px;
     }

   • 或者可以使用background-position

     .container{
     	background-position:12px 20px;
     }

2. 在容器里移动

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

   

   然后得到left值的范围是 0 到 container_width - image_width，同样也可以得到top值的范围。

3. 图片比容器大

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

   

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

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

4. 不变量

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

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

   

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

背景图片的百分比方法

1. 定义

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

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

   

   我们很容易得到两者之间的值

   left = (container_width - image_width) * percentage
   

2. 范围检测

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

3. 不变量

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

   

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

4. 水平和垂直

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

   

   再看看数学公式

   left = (container_width - image_width) * percentage = 0 * percentage = 0 
   

   你只需要设置两个值left、top就行了。

总结

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

---

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

---

[Teemobustin]

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

[riskers]

@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]

图文并茂，不过作者反而把我说迷糊了，标准文档说得更明白些: 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]

图片画得太草了

[ghostogre]

good job