html - background-size 为 'cover' 时使用百分比

Question

这个问题在这里已经有了答案:





Using percentage values with background-position on a linear-gradient

(2 个回答)


3年前关闭。




嗨，我是 HTML/CSS 的新手，仍在努力理解背景大小的使用。假设有一个 div 元素(蓝色矩形)包裹了一个图像(红色正方形)



所以我有两个问题:

1.当我使用background-size: cover时，图像将被拉伸(stretch)为如下图所示的粉红色方 block ，是否正确？

如果我使用 background-position: 0 100%; ，粉红色的方 block 会向上，它的底边会和div的边缘相匹配，据我的理解，y%的意思是y轴上两个元素之间你希望有多少多余的空间，所以我把它设置为100% ，粉红色方 block 应该向下，它的顶部边缘应该匹配 div 的底部边缘，这就是你如何拥有整个 100% 的空间，就像这样:

但我试过发现粉红色的正方形实际上是向上的，所以它的底边接触到 div 的底边，如下所示:

我无法理解，它怎么会有 100% 的多余空间？

Answer 1

如果你看w3school's background position page ，位置与“多余空间”无关，它与图像的起始位置有关。

background-position: 0 100%;

是一样的

background-position: left bottom;