在背景圖像上應用圖像

Question

我的CSS代碼似乎有問題。 我想讓背景圖像的頁面width和height為100% ，然后將其他圖像策略性地放置在背景圖像的頂部。 我遇到的問題是，當我將圖像絕對放置在頂部時，除非指定背景圖像的實際高度，否則實際圖像不會顯示在背景中。 誰能建議一種為背景圖像實際指定高度的方法？

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

 <div id="map"> <div id="registermap"> <a href="register.html"> <img src="images/middle-earth_map1.png" alt="Registration Link" class="wobble" /> </a> </div> <div id="gollum"> <a href="cast.html"> <img src="images/gollum.png" alt="Cast and Crew Link" class="wobble" /> </a> </div> <div id="playtrailer"> <a href="trailer.html"> <img src="images/play_button.png" alt="Movie Trailer Link" class="wobble" /> </a> </div> </div> 

Answer 1

您的具有地圖 ID的div不能填充所有窗口大小，請將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

您可以為body設置background-image ，以確保它占據所有窗口。

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