html - 多个 CSS 背景设置为覆盖 50% 100% 大小(并且固定!)

Question

• 固定背景单张图片？ ✔
• 固定背景、单张图片、缩放和居中？ ✔
• 两个背景，每边 50%？ ✔
• 三个背景，每个 33%，封面样式缩放，同时也是 100% 高度？ ✘

我需要三张背景图片，每张占据屏幕的 33%，布局如下:

11111|22222|33333
11111|22222|33333
11111|22222|33333
11111|22222|33333
11111|22222|33333

这个背景需要修复，因为其他东西在它上面滑动。我已经设法有点用下面的两张背景图片让它工作:

.multiple-background {
    background-color: transparent;
    background-image: url("img1.jpg"), url("img2.jpg");
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-clip: border-box, border-box;
    background-origin: padding-box, padding-box;
    background-size: 50% 100%;
    background-position: left top, right top;
}

不幸的是，这会拉伸(stretch)背景图像。我需要一些东西可以让我固定图像占用的水平空间量 (33%)，同时还可以进行 100% 宽度和封面样式缩放。

切换为 background-size: 50% auto; 可以正确缩放，但现在它没有覆盖整个背景。

Answer 1

为每个背景使用不同的元素并设置绝对位置和z-index值进行排序