是否可以使用多个图像切片来实现“背景大小:封面”效果



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

background-size可以采用百分比值,并且对于不同的背景图像,您有不同的background-size和背景位置值(用逗号分隔),因此您可能能够使其工作。

然而,由于background-position的工作方式,它可能有点棘手——background-position: 50% 0;的意思是"定位图像,使沿图像长度的50%的点为沿元素长度的50%"。对于复杂的切片,可能需要花费大量的时间才能使图像对齐,并且可能存在1像素舍入问题。

编辑:并且,正如您在评论中所指出的,background-size:cover在确保覆盖背景的同时保持图像的宽高比,除非您事先知道元素的尺寸,否则百分比值无法覆盖背景。

最新更新