从视觉上我能体会到两者之间的区别，但是在哪种情况下我应该优先选择另一种？
有一点用完它们还是可以用百分比代替？
目前，在使用这些属性时，我似乎无法超越尝试错误的方法，这是我的头脑。
我也只能找到非常模糊的解释，尤其是我发现W3C doc非常令人困惑。
我可能有点胖了，但是有人可以给我简单的英语解释和相关示例吗？
请使用this fiddle。谢谢。
CSS
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-size:contain;
background-repeat:no-repeat;
}
注意
可接受的答案是我目前认为最简洁，最完整的答案。
感谢大家的帮助。
最佳答案
您可以考虑查看控制输出的伪代码。分配给图像尺寸的值直接取决于容器的纵横比和背景图像的纵横比。
注意: Aspect ratio = width / height
包含
if (aspect ratio of container > aspect ratio of image)
image-height = container-height
image-width = aspect-ratio-preserved width
else
image-width = container width
image-height = aspect-ratio-preserved height
封面
if (aspect ratio of container > aspect ratio of image)
image-width = container width
image-height = aspect-ratio-preserved height
else
image-height = container height
image-width = aspect-ratio-preserved width
你看到这种关系了吗？在
cover和contain中，都保留宽高比。但是两种情况下的if-else条件都相反。这就是
cover覆盖整个页面的原因，而看不到任何白色部分。当容器的宽高比较大时，缩放图像，使其宽度等于容器的宽度。现在，随着宽高比变小，高度会更大。因此，它覆盖了整个页面，没有任何白色部分。问:可以用百分比代替它们吗？
不，不只是按百分比。您需要调节。
问:在哪些情况下我应该优先选择另一种情况？
创建网站时，您不需要固定背景中的白色部分。因此，请使用
cover。当您使用重复背景时，可以使用另一种(例如，当您的图案/图像具有很高的纵横比/容器时，可以使用
contain并将contain设置为background-repeat)。但是repeat-y的更合适用法是用于固定的height / width元素。