[英]Bootstrap 3 CSS image caption overlay
我使用 bootstrap 並且在圖像上覆蓋標題時遇到問題,標題 div 無法放入框內,如下所示:
HTML:
<div class="col-sm-4">
<a href="#">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">The pack, the basic unit of wolf social life.</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#">
<img src="images/upload/projects/21/cake.png" class="img-responsive" alt="">
<div class="desc">
<p class="desc_content">The pack, the basic unit of wolf social life.</p>
</div>
</a>
</div>
CSS:
div.desc{
position: absolute;
bottom: 0px;
width: 100%;
background-color: #000;
color: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
}
解決方案:
感謝@himanshu 解決了這個問題。
div.desc{
background-color: #000;
bottom: 0;
color: #fff;
left: 0;
opacity: 0.5;
position: absolute;
width: 100%;
}
.fix{
width: 100%;
padding: 0px;
}
我認為問題在於放置而不是覆蓋, div.desc
是絕對的,而 image 是它的兄弟。 所以疊加不會跟隨圖像,它只會跟隨錨標記或你的div.wrapper
。
從我所看到的是,錨點或包裝器中的圖像或填充有邊距。
最好的解決方案是將desc
和 image 放在另一個div
,寬度為 100%,填充為 0。
<div class="col-sm-4 wrapper">
<a href="#">
<div class="fix">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">The pack, the basic unit of wolf social life.</p>
</div></div>
</a>
</div>
CSS:
.fix{width:100%; padding:0px;}
對於嘗試在 Bootstrap 中的圖像上疊加標題的其他人,請考慮使用輪播標題。
見這里: http : //www.w3schools.com/bootstrap/bootstrap_carousel.asp
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
嘗試這個
<div class="wrapper">
<div class="">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
</div>
<div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
</div>
<div class="wrapper">
<div class="">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
</div>
<div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
</div>
css
div.desc_content {
background-color: #000;
color: #FFF;
font: bold 11px verdana;
padding-left: 10px;
padding-top: 7px;
height: 23px; opacity: 0.7;
position: relative;
top: -30px;
}
div.wrapper{
float: left;
position: relative;
margin: 10px;
}
將此屬性用於 div.desc 類
div.desc{
position: absolute;
bottom: 0;
background-color: #000;
color: #fff;
opacity: 0.5;
left:0; /** new **/
right:0; /** new **/
filter: alpha(opacity=50);
}
這對我有用。 有了這個,您將在圖像底部找到標題。
<div class="container-fluid">
<img src="someimg.jpg" class="img-fluid " alt="Patience">
<div class="carousel-caption d-block">
<h1>Some label</h1>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
如果你想要它在頂部,那么在你的 CSS 中執行以下操作:
.carousel-caption{
top:0;
bottom:auto;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.