Question

我正在尝试将一个具有部分透明背景的div（意味着图像的区域为空白 - 而不是X％不透明度）置于另一个之上。

#about {
  background-image:url('http://i.imgur.com/B922OoM.png');
  background-position: center;
  background-repeat: none;
  background-size: cover;
  background-color: transparent;
  z-index: 2;
  height: 450px;
  width: 100%;      
}

我不能让div在图像后面填充白色。

jsfiddle：http://jsfiddle.net/4HAxu/ - 相关div为#about

（我很确定图片导出正确 - 如果您将background-color:transparent更改为background-color:blue，您就会明白我的意思。）

Answer 1

你的形象很好。事实上你的#header实际上并没有延伸到那么远。如果您更改body的背景颜色，您会发现它不是您的#about div，而是显示在其后面的body白色

Red BG body JSFiddle

为了缓解这个问题，如果你实际覆盖了div，你会得到我认为你想要达到的效果。

Overlayed divs with negative top margin

将背景图像设置为具有部分透明度的图像

1 个答案: