[英]Can't Position Image over background image (Html, Bootstrap, CSS)
[英]How can I position a div over a background image in bootstrap
我想在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: 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;
}
這是您要做什么?
看到這個小提琴。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.