[英]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.