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
と画像を、パディングなしで100%幅の別のdiv
に入れることです。
<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);
}