当背景大小为“ cover”时使用百分比

Question

嗨，我是HTML / CSS的新手，但仍在努力了解背景尺寸的用法。假设有一个div元素（蓝色矩形）包裹了一个图像（红色正方形）

所以我有2个问题：

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

1. 如果我使用background-position: 0 100%;，则粉红色的正方形会上升，并且其底部边缘将与div的边缘匹配，据我的理解，y％表示您希望两个元素之间有多少剩余空间y轴，所以我将其设置为100％，粉红色的正方形应该向下，并且其顶部边缘应与div的底部边缘匹配，这就是您可以这样拥有整个100％空间的方式：

但是我尝试过，发现粉红色的正方形实际上上升了，因此它的底边触及div的底边，像这样：

我不明白，它怎么有100％的多余空间？

Answer 1

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

background-position: 0 100%;

与

是同一件事

background-position: left bottom;