html - 使用负上边距覆盖页眉时背景隐藏

Question

我正在尝试将标题叠加到图像上。但是背景隐藏在图像下方。为什么会这样？

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

我们这里有 2 个解决方案:

1. 使用 display:inline-block 并为您的 h1 设置 width:100%，同时使用负 margin -bottom 在 img 上改为:

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

   Demo 1.

2. 为 img 使用 position:relative 并为其设置 z-index:-1:

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

   Demo 2.