html - 将图像放在背景前面？

Question

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

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

Note:- Here in the image i am talking about the header background and the green bar with shadow at the top.

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