背景与负顶部边缘覆盖头时隐藏(Background hidden when overlaying h

我试图覆盖头到图像。 然而，背景图像下隐藏。 这究竟是为什么？

http://jsfiddle.net/YRDFB/

<div class="header">
<img width="100%" height="200px"  src="/path/to/image.jpg" />
<h1>Header Title</h1></div>


h1 {
    background: rgba(67,67,67,0.8);
    margin-top: -3em;
}

Answer 1:

We have 2 solutions here:

1. Using display:inline-block and set width:100% for your h1, also use negative margin-bottom on the img instead:

   h1 {
     background: rgba(67,67,67,0.8);    
     display:inline-block;
     width:100%;
   }
   img {
     margin-bottom:-4em;
   }
   

   Demo 1.

2. Using position:relative for the img and set z-index:-1 for it:

   h1 {
     background: rgba(67,67,67,0.8);    
   }
   img {
     margin-bottom:-4em;
     position:relative;
     z-index:-1; 
   }
   

   Demo 2.

Answer 2:

您是否正在寻找此更新小提琴

h1 {
background: rgba(67, 67, 67, 0.8);
position:relative;
z-index:9;
display:block;
width:100%;
padding:0;
color:#fff;
margin-top:-43px;
}

文章来源: Background hidden when overlaying header with negative top margins