在css框顶部的图像不显示

Question

我有两条水平线在彼此的顶部，我想在这些线的顶部放置一个图像，但我无法用CSS实现这一点。图像隐藏在水平线后面。

JSFiddle

这是图像

我的HTML

<div class="creambar"></div> 
<div class="graybar silhouette"></div>

我的CSS

graybar { height: 20px;  background-color: #343434; width: 100%; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); }
.creambar { height: 5px; background-color: #d4c293; width: 100%; }

Answer 1

你想要这样的东西吗？

.creambar {
  border-bottom: 20px solid #343434;
  border-top: 4px solid #d4c293;
  bottom: -69px;
  position: relative;
  width: 100%;
}
.graybar {
  border-bottom: 20px solid #343434;
  background: url("http://i.stack.imgur.com/3xbAl.png") 0 0 no-repeat;
  height: 62px;
  position: relative;
}

<div class="creambar"></div>
<div class="graybar"></div>

参见完整页面。

Answer 2

试试这个。我只是改变了z-index一个在另一个之上。您可以在z-index属性here

上阅读更多内容

<div class="creambar"></div> 
<div class="graybar silhouette"></div> 

CSS

graybar { height: 20px;  background-color: #343434; width: 100%;position:relative;z-index:1; }
.graybar .silhouette { background: url("graphics/panr_silhouette_2.png"); position:relative;z-index:99; }
.creambar { height: 5px; background-color: #d4c293; width: 100%; position:relative;z-index:1; }