将图像置于背景前？

Question

我正在使用css定位来设置标题背景上方的图像位置。但它没有用。

这是我想要实现的psd图像：

  

注意： - 在图像中，我在谈论标题背景和   绿色的酒吧顶部有阴影。

Html代码：

<header id="masthead" class="site-header" role="banner">
          <div class="header-shadow"></div>
          <hgroup></hgroup>
          <nav role="navigation" class="site-navigation main-navigation">

          </nav><!-- .site-navigation .main-navigation -->
    </header><!-- #masthead .site-header -->

CSS代码： -

.site-header{
    position: relative;
    background: url('../images/background.jpg') repeat-x;
    height: 176px;
}
.header-shadow{
    position: absolute;
    background: url('../images/header-shade.jpg') repeat-x;
    height:31px;
    top: 0;
}

Answer 1

您已从页面流中取出.header-shadow。因此它不会占用其父级的宽度。设置width:100%：

.header-shadow {
    position: absolute;
    background: url('../images/header-shade.jpg') repeat-x;
    height:31px;
    width:100%;
    top: 0;
}

JSFiddle

甚至更好;根本不要完全定位：

.header-shadow {
    background: url('../images/header-shade.jpg') repeat-x;
    height:31px;
}

JSFiddle

Answer 2

您是否尝试过设置左css属性，例如

left:0px;

你也可以尝试在css中定义图像的宽度和高度，尽管这通常应该由浏览器来解决。

Answer 3

希望它会有所帮助，使用，header-shadow - ＆gt;作为亲戚的位置，它将工作正常

.site-header{
position: relative;
background: url('../images/background.jpg') repeat-x;
height: 176px;
}
.header-shadow{
 position: relative;
background: url('../images/header-shade.jpg') repeat-x;
height:31px;
width:100%;
top: 0;
left:0;
}