当覆盖标题具有负顶部边距时，背景隐藏 [英] Background hidden when overlaying header with negative top margins

问题描述

我试图将标头叠加到图片上。但是背景隐藏在图像下面。
为什么会发生这种情况？

I am trying to overlay a header onto an image. However the background is hidden under the image. Why is this happening?

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

推荐答案

1. 使用 display：inline-block 并设置 width：100％为 h1 ，也使用负数 margin-bottom img 改为：

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

演示1.

使用 position：relative 为img并设置 z-index：-1 为它：

Demo 1.

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

演示2.

这篇关于当覆盖标题具有负顶部边距时，背景隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！