我有下面的设置，我尝试设置background-size: cover并尝试不同的背景位置。同时检查fiddle的作用。

HTML

<div id="container">
</div>

字符串

CSS

#container {
  background: url(https://1.bp.blogspot.com/-iCnFX7eWVjs/XR9NQutHXcI/AAAAAAAAJ9k/ISWH3UXgJF8QJdsV6P9wh3agzOwOF_aYgCLcBGAs/s1600/cat-1285634_1920.png);
  width: 500px;
  height: 500px;
  background-size: cover;
  background-position: center center;
}

型

我的问题

为什么更改background-position的Y轴值没有任何影响（top、center和bottom相同？它总是在Y轴上显示图像的相同区域。如果给定容器的大小和图像的大小，我如何预测图像的哪一部分将显示？

到目前为止我尝试过的/学到的东西

我所理解的是，它强烈地依赖于容器和图像的纵横比。将容器设置为500 x250 px会使Y轴现在可变，但现在为它设置left、center或right时，X轴始终保持不变。在不同的Discord频道中提出这个问题，我也得到了一个答案，即图像只适合一个轴，而在另一个轴上重叠（也就是说，其中一个轴总是静态的，不管值如何）。是真的吗？是否存在X轴和Y轴都是动态的，当提供不同的值时会改变位置的情况？