如何制作Flex容器背景：上半部分是图像，下半部分是背景色？

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;
}