html - CSS - 如何在 3 层中正确添加 3 个图像

Question

我有三层图像。 ( https://jsfiddle.net/zaqu4qja/1/ )

主要问题是山脉应该固定在底部，但它们会根据屏幕尺寸漂浮在页面上。

第二个问题是我不是最擅长使用 css 的，如果有任何改进 css 代码的建议，我将不胜感激。

山的相关代码:

#foreground-mountains {
position: absolute;
z-index: 10;
bottom: 0;
left: 0;
background-size: cover;
width: 100vw;
background: url("/img/multiplikationsdreiecke/Vordergrund-Berge.png") no-repeat;
}

@media only screen and (min-width: 1024px) {
#foreground-mountains {
width: 100%;
height: 250px;
   }
}

Answer 1

你可以把这些放在一起:

• 您可以在background属性中堆叠多个图像、颜色和渐变
• 您可以定义多个背景尺寸，以逗号分隔(只需保持声明的背景顺序即可)

body {
  height: 100vh;
  background:
    url("https://s7.postimg.cc/nz903xrjv/Vordergrund-_Berge.png"),
    url("https://s7.postimg.cc/6yq3v96sr/Pyramide.png"),
    url("https://s7.postimg.cc/wu9ueft6z/Hintergrund.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  /* Adjust to your needs */
  background-size: contain, 300px, cover ;
}