是否可以使用许多图像切片来实现`background-size:cover`效果?

时间:2012-03-28 07:57:12

标签: css3 css

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

1 个答案:

答案 0 :(得分:0)

background-size可以获取百分比值,并且您对不同的背景图片(以逗号分隔)具有不同的background-size和背景位置值,因此您可以使其工作。< / p>

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

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