多个 CSS 背景设置为覆盖 50% 100% 大小（并且已修复！）答案

【问题标题】：Multiple CSS Backgrounds set to cover with 50% 100% size (and fixed!)多个 CSS 背景设置为覆盖 50% 100% 大小（并且已修复！）
【发布时间】：2014-03-08 16:50:38
【问题描述】：

固定背景单张图片？ ✔
固定背景、单张图像、缩放和居中？ ✔
两个背景，每边 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;
}

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

切换到 background-size: 50% auto; 之类的东西可以正确缩放，但现在它不能覆盖整个背景。

【问题讨论】：

我认为background-size 无法做到这一点。 contain、cover 和 autoall 仅根据图像的固有比例缩放图像。
旁注，如果某个背景属性对所有背景具有相同的值，您可以只指定一次，它将传播到其余背景。这意味着background-attachment: fixed 等价于例如background-attachment: fixed, fixed，同样适用于background-clip、background-origin 和background-repeat。
@BoltClock 我从 FF 的检查员那里复制了它，所以这就是扩展的 CSS。很好的提示！
@BoltClock 如果我不能用一个元素做到这一点，那么最好的元素结构是什么？
为什么不能在照片编辑器中将 3 张图像合并为一张并缩放以满足您的需求？然后根据需要将内容放在上面。此外，如果你把小提琴放在一起，可能会更容易帮助你找到解决方案。

标签： html css background

【解决方案1】：

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

【讨论】：