“background-size: cover;”有区别吗和“背景大小：覆盖，包含；”？

Question

我使用的html编辑工具可以选择“background-size: cover;”和“背景大小：覆盖，包含；”分别地。 另外，我想知道“背景大小：包含；”之间是否有区别和“背景大小：包含、覆盖；”。

“background-size: cover;”之间没有视觉差异和“背景大小：覆盖，包含；”

Answer 1

在CSS中，

background-size

属性用于指定背景图像的大小。

cover

和

contain

关键字具有特定含义：

• cover

  ：此关键字告诉浏览器尽可能大地缩放图像以填充整个容器，即使它必须拉伸图像或从其中一个边缘切掉一点点。如果图像的比例与元素不同，则会垂直或水平裁剪图像，以便不留空间⁴。

• contain

  ：此关键字告诉浏览器将图像缩放到最大尺寸，同时保留其固有的纵横比，使其宽度和高度都能适合背景定位区域。它确保整个背景图像适合背景区域，保持其原始纵横比。如果背景区域小于图像，图像将缩小以适合背景区域。

当您使用

cover, contain

或

contain, cover

等两个值时，它适用于多个背景图像。第一值对应于第一背景图像，第二值对应于第二背景图像。如果您只有一张背景图像，则第二个值将被忽略，这就是为什么您看不到

cover

和

cover, contain

之间或

contain

和

contain, cover

² 之间任何视觉差异的原因。

如果你想同时看到

cover

和

contain

的效果，你需要有两张背景图片。例如：

background-image: url(image1.jpg), url(image2.jpg);
background-size: cover, contain;

在这种情况下，

image1.jpg

将使用

cover

调整大小，而

image2.jpg

将使用

contain

调整大小。第二个图像将绘制在第一个图像之上²。