Question

我的CSS代码似乎有问题。我想在页面100%和width的{{1}}处获得背景图片，然后将其他图片策略性地放置在背景图片的顶部。我遇到的问题是，当我绝对将图像置于顶部时，除非我指定背景图像的实际高度，否则实际图像不会显示在背景中。任何人都可以建议一种实际指定背景图像高度的方法吗？

height

#map {
  background-image: url("images/middleearth_map.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#registermap {
  position: absolute;
  top: 5%;
  right: 2%;
}

#gollum {
  position: absolute;
  top: 40%;
  right: 15%;
}

#playtrailer {
  position: absolute;
  top: 30%;
  left: 0%;
}

Answer 1

您的div 地图 ID不会填满所有窗口大小，请将 css 更改为：

#map {
  background-image: url("images/middleearth_map.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  margin:0;
  padding:0;
}

Answer 2

您可以为background-image设置body，以确保它占据所有窗口。

body {
  background-image: url("https://i.stack.imgur.com/6JzYG.jpg");
  background-size: 100% 100%; /* Picture stretches */
  min-height: 100vh; /* Body occupies at least all screen */
  margin: 0;
}

在背景图像上应用图像

2 个答案: