如何制作弹性容器背景:上半部分是图像，下半部分是背景色?

Question

我有一个 flex 容器，我希望这个容器的背景图像/颜色为 50%/50%(顶部/底部(。这是一个模板，因此我事先不知道容器的高度，我希望容器将元素包裹在其中，无论它们的高度是多少。

Answer 1

像这样使用多个背景：

body {
margin:0;
background:
url(https://picsum.photos/1000/800?image=1069) top/100% 50% no-repeat,
linear-gradient(red,red) bottom/100% 50% no-repeat;
height:100vh;
}

或者干脆这样：

body {
margin:0;
background:
url(https://picsum.photos/1000/800?image=1069) top/100% 50% no-repeat,
red;
height:100vh;
}

也像这样：

body {
margin:0;
background:
linear-gradient(red,red) bottom/100% 50% no-repeat,
url(https://picsum.photos/1000/800?image=1069) center/cover no-repeat;
height:100vh;
}