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

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

1 个答案: