Html 在 Bootstrap 轮播中的图像上添加文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29734492/
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
Adding text over an image in Bootstrap carousel
提问by jsan
I have a carousel with an image that i would like to put text over, but it is not working. The text appears under the image instead of overlayed on top of it
我有一个带有图像的旋转木马，我想将文本放在上面，但它不起作用。文本显示在图像下方而不是覆盖在图像之上
<!-- WRAPPER FOR SLIDES -->
<div class="carousel-inner">
<div class="active item">
<div class="carousel-content">
<img src="img/Slide 1.jpg" alt="..." position="relative">
<p>TEST</p>
</div>
<div class="carousel-caption">
<h3>What we do</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Who we Are</h3>
</div>
</div>
</div>
回答by Hashem Qolami
You could simply positionthe element absolutely just like built-in captions and set the top/bottom, left/rightoffsets.
您可以像内置字幕一样简单地position将元素absolutely 设置为top/ bottom、left/right偏移量。
Note that the carousel captions have z-index: 10by default, so you may want to give the positioned element a higher z-index:
请注意，轮播标题z-index: 10默认具有，因此您可能希望为定位元素提供更高的z-index：
For instance:
例如：
.carousel-content {
position: absolute;
bottom: 10%;
left: 5%;
z-index: 20;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="http://lorempixel.com/1200/315" alt="...">
<div class="carousel-content">
<p>TEST</p>
</div>
<div class="carousel-caption">
<h3>What we do</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="carousel-caption">
<h3>Who we Are</h3>
</div>
</div>
</div>
</div>回答by nikk wong
Here is a possible solution:
这是一个可能的解决方案：
jsfiddle: http://jsfiddle.net/38v09vha/
jsfiddle：http: //jsfiddle.net/38v09vha/
<div class="carousel-inner">
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="absolute-div">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="absolute-div">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<div class="absolute-div">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
</div>
</div>
and css:
和CSS：
.carousel-caption {
position: absolute;
z-index: 1;
display:table;
width:100%;
height:100%;
}
.absolute-div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.carousel-caption h3 {
display:table-cell;
vertical-align: middle;
text-align:center;
}
.item {
position:relative;
}
Assuming that you want them vertically aligned in the middle of the image—Basically, you'll want to relatively position the slide-items parent div, which will inherit it's height from the combined height of the image and the text. Then, you'll want to create a div that houses the text which has the css attribute position: absolute. This element will be a direct child of the relatively positioned parent. This will allow you to absolutely position your text within the nearest relatively positioned element. See this CSS Tricks tutorial to understand how this works.
假设您希望它们在图像中间垂直对齐 - 基本上，您需要相对定位幻灯片项父 div，这将从图像和文本的组合高度继承它的高度。然后，您需要创建一个 div 来存放具有 css 属性的文本position: absolute。此元素将是相对定位的父元素的直接子元素。这将允许您将文本绝对定位在最近的相对定位元素中。请参阅此 CSS 技巧教程以了解其工作原理。
This will allow you to position the text over the image, I then went ahead and used table positioning to allow you to vertically center them, although you could go ahead and place them over the image wherever you like.
这将允许您将文本定位在图像上，然后我继续使用表格定位来让您垂直居中它们，尽管您可以继续将它们放在图像上任何您喜欢的位置。
回答by Vivien G.
Hope it help someone, in my case i did it with the following code :
希望它对某人有所帮助，就我而言，我使用以下代码进行了操作：
<style>
.carousel-caption {
position: absolute;
z-index: 1;
display:table;
width:100%;
height:100%;
}
.carousel-caption div {
display:table-cell;
vertical-align: middle;
text-align:center;
}
.trickcenter {
position: fixed;
top: 84%; // 50% for perfect centering
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="item">
<img src="images/slider_T02.jpg" alt="Moto de collection">
<div class="carousel-caption trickcenter">
<div>HERE THE TEXT YOU WANT</div>
</div>
</div>
<div class="item">
<img src="images/slider_T03.jpg" alt="Véhicule Haut de Gamme">
<div class="carousel-caption trickcenter">
<div>HERE THE SECOND TEXT</div>
</div>
</div>
