css - 是否可以使用很多图像切片来实现 `background-size: cover` 的效果？

Question

如果我对单个大图像文件使用 background-size: cover;，我会得到我想要的效果。但是，如果我使用图像切片 技术创建背景(即将图像分成几幅图像并以不同方式压缩图像以实现更好的文件大小减小)，是否可以以某种方式实现相同的效果？

Answer 1

background-size可以采用百分比值，并且您有不同的 background-size 和 background-position` 值用于不同的背景图像(以逗号分隔)，因此您可能能够让它工作。

但是，由于 background-position 的工作方式，它可能有点棘手 — background-position: 50% 0; 意思是“定位图像以便沿图像长度方向的 50% 点是沿元素长度方向的 50%”。对于复杂的切片，可能需要大量操作才能使图像对齐，并且可能存在 1 像素舍入问题。

编辑:正如您在评论中指出的那样，background-size:cover 保持图像的宽/高比，同时确保背景被覆盖，百分比值不能，除非您事先知道元素的尺寸。