[译]CSS-理解百分比的background-position
译文地址
通过这篇文章能够深刻理解 background-position 的百分比
通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的 background-position 值来解决一些问题。
通常使用方法
-
摆放图片
通常在容器里摆放图片是给出具体图片的
top、left相对容器的top、left的值。
![[译]CSS-理解百分比的background-position](http://www.liuhaihua.cn/wp-content/uploads/2015/10/QjAv2qj.jpg)
在CSS中很容易做到。
- 在容器里使用
<img>标签
.container{ position:relative; } .container img{ position:absolute; top:12px; left:20px; } - 或者可以使用
background-position
.container{ background-position:12px 20px; } 2.在容器里移动
现在你想让图片在容器里面移动而且还不能超出容器边界。你肯定是要简单算一算图片 top 、 left 的最大值。
![[译]CSS-理解百分比的background-position](http://www.liuhaihua.cn/wp-content/uploads/2015/10/73MjEfr.jpg)
然后得到 left 值的范围是 0 到 container_width - image_width ，同样也可以得到 top 值的范围。
3.图片比容器大
到目前为止，我们讨论的问题都很简单。现在，我们要看看图片比容器大的情况。容器必须要被图片填满。
![[译]CSS-理解百分比的background-position](http://www.liuhaihua.cn/wp-content/uploads/2015/10/rYf26v.png)
同样我们可以算出 left 值的范围是 0 ~ container_width - image_width ，只不过这次 container_width - image_width 是负值。
你可以搞明白正值和负值的关系，也可以凭直觉搞定。当你看到 12px 20px 你很容易知道图片是怎么放置的。但是，你看到 -12px -20px 就比较难想明白了。
4.不变量
好了，现在你已经写好了位置点并且没有任何问题。现在，因为某些原因，我们不用长方形容器了，用正方形容器。那么之前的那些位置值就不那么合适了。
我们之前计算的值不再有效，因为现在情况变了。你想要改变图片和容器大小也是一样的道理。
![[译]CSS-理解百分比的background-position](http://www.liuhaihua.cn/wp-content/uploads/2015/10/Rj2Erq.png)
可以从图中看到，如果使用固定的值，那么一旦改变某些条件，那么就可能会让已经写好的布局乱掉。
背景图片的百分比方法
1.定义
我们要换一个确定图片位置的方法了。当图片的左边框和容器的左边框挨着时， left 是 0% 。当图片右边框和容器的右边框挨着时， left 是 100% 。
这两个例子分别就是 0% 和 100% 的情况：
![[译]CSS-理解百分比的background-position](http://www.liuhaihua.cn/wp-content/uploads/2015/10/ZfEr6nN.png)
我们很容易得到两者之间的值
left = (container_width - image_width) * percentage 2.范围检测
这个方法最方便的就是我们不用再算图片相对容器的范围。它就是 0 ~ 100 。
3.不变量
我们画两个轴，一个对于容器，一个对于图片。如果我们设置值为 60% ，则两个轴的 60% 会重合在一个点上。
![[译]CSS-理解百分比的background-position](http://www.liuhaihua.cn/wp-content/uploads/2015/10/ERzeqeZ.jpg)
就像上面的图片一样，这个新的方法在不同比例大小情况下也工作得很好。
4.水平和垂直
如果你细心的话你会注意到图片和容器一样大的话，两个轴会完全重合。设置 30% 还是 80% 都不重要。
![[译]CSS-理解百分比的background-position](http://www.liuhaihua.cn/wp-content/uploads/2015/10/MjUVbm.jpg)
再看看数学公式
left = (container_width - image_width) * percentage = 0 * percentage = 0 你只需要设置两个值 left 、 top 就行了。
总结
一开始，我没有明白百分比值是怎么对 background-position 作用的。我真的有点迷惑，因为使用百分比让我不能直观地感受到变化。然而，后来我发现使用百分比解决图片定位是极其方便的。
原文地址
欢迎订阅我的 博客
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
