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

Question

我正在尝试将一个具有部分透明背景(意味着图像的区域是空白的——而不是 X% 不透明度)的 div 放在另一个之上。

#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/p>

Red BG body JSFiddle

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

Overlayed divs with negative top margin