如何在引导程序中将div放在背景图像上

Question

我想在col-xs-3背景图片上放置一个这个大小col-xs-12的小div，但它会一直将它直接推到图像下面而不是它上面。

这是我的代码......

HTML：

<div class="hero-container">
          <div class="row-fluid">
            <div class="span12">
              <div class="image wow bounceInUp"><img class="bg-image" src="hero.jpg">
                <div class="col-xs-3 pull-right contact-menu">
                  <ul>
                    <li>Phone: xxxx xxx xxx</li>
                    <li>Email: x.xxxxx@xxxxx.com</li>  
                  </ul>
                </div>
              </div>      
                <div class="caption post-content wow bounceInUp">
                    <h1>UX Design & Development</h1> 
                </div>

            </div>
          </div>
  </div>

CSS

    .bg-image {
    position: relative;
    width: 100%;
    opacity: 0.75;
    background-size: cover;
    src: url(hero.jpg);
    z-index: 0;
}

.hero-container{
    position:relative;

}

.post-content {
    top:-10px;
    left:40px;
    position: absolute;
    font-size: 2.5vw;
    text-align: center;
}

.contact-menu {
    background-color: #d6d6d6;
    padding: 15px;
    display: block;
    z-index: 3;
}

Answer 1

这是你想要做的吗？ 见 Fiddle.

  <div class="row-fluid">
        <div class="span12">
            <div class="caption post-content wow bounceInUp">
                 <h1>UX Design & Development</h1> 
            </div>

            <div class="col-md-4 col-sm-6 col-xs-12 image wow bounceInUp block bg-image ">
                <div class="col-md-7 col-xs-8 pull-right contact-menu borders">
                    <ul>
                        <li>Phone: xxxx xxx xxx</li>
                        <li>Email: x.xxxxx@xxxxx.com</li>  
                    </ul>
                </div>
            </div> 
        </div>
    </div>
</div>