Bootstrap 3 CSS 图像标题叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26010257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 CSS image caption overlay
提问by conmen
I use bootstrap and having a problem to overlay caption over an image, the caption div just cannot fit within the box, as shown below:
我使用 bootstrap 并且在图像上覆盖标题时遇到问题，标题 div 无法放入框内，如下所示：
HTML:
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:
CSS：
div.desc{
position: absolute;
bottom: 0px;
width: 100%;
background-color: #000;
color: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
}
SOLUTION:
解决方案：
Thanks to @himanshu to solved the issue.
感谢@himanshu 解决了这个问题。
div.desc{
background-color: #000;
bottom: 0;
color: #fff;
left: 0;
opacity: 0.5;
position: absolute;
width: 100%;
}
.fix{
width: 100%;
padding: 0px;
}
采纳答案by himanshu
I think problem is in placement rather then overlay, div.descis absolute and image is its sibling. So overlay will not follow image it will follow only anchor tag or your div.wrapper.
我认为问题在于放置而不是覆盖，div.desc是绝对的，图像是它的兄弟。所以覆盖不会跟随图像它只会跟随锚标记或您的div.wrapper.
From what I can see is that there is a margin on image or padding in anchor or wrapper.
从我所看到的是，锚点或包装器中的图像或填充有边距。
The best solution is to put descand image in another divwith 100% width with 0 padding.
最好的解决方案是将desc图像放入另一个div100% 宽度和 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:
CSS：
.fix{width:100%; padding:0px;}
回答by DracSkywalker
Try this
尝试这个
<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
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;
}
回答by smntx
For others trying to overlay a caption on an image in Bootstrap, consider using carousel captions.
对于尝试在 Bootstrap 中的图像上叠加标题的其他人，请考虑使用轮播标题。
See here: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
见这里：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>
回答by Vitorino fernandes
Use this attributes for div.desc class
将此属性用于 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);
}
