html - 带有图像的单个 emcompassing Overflow DIV

Question

我试图让我的图像在溢出 div 的同时全屏显示

摘自这里: CSS - how to overflow from div to full width of screen

除了不使用颜色，我使用的是图像..但我也希望它是全屏的。有什么想法吗？

.main-header:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 99vw;
  background-size: cover;
  background: url(header_bg.jpg) no-repeat center center; /* help */
  z-index: -1;
}

Answer 1

像这样？

body{
  margin:auto;
}

#for_real,#top{
  width:100px;
  height:100px;
  border:solid;
  z-index:100;
}
#for_real img{
  position:fixed;
  top:0px;
  left:0px;
  opacity:0.5;
  
  width:100vw ;
  height:100vh;
}

<div id='top'>
TOP DIV WITH NO IMAGE
</div>

<div id='for_real'>
DIV WITH IMAGE
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-gpy8G_VpoocZD5L5tuNO_hO_BC9zXl32WCjaHcE-ICiWhL5O'>

</div>