css 如何在 Bootstrap 中将div放置在背景图像上

bttbmeg0  于 2023-10-21  发布在  Bootstrap
关注(0)|答案(1)|浏览(128)

我想在col-xs-12背景图像上放置一个大小为col-xs-3的小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: [email protected]</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;
}
xam8gpfp

xam8gpfp1#

这就是你想做的吗?
看到这个**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: [email protected]</li>  
                    </ul>
                </div>
            </div> 
        </div>
    </div>
</div>

相关问题