Question

我有一个带有图像的旋转木马，我想把文字放在上面，但它不起作用。文字显示在图片下方而不是叠加在其上面

<!-- 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>

Answer 1

你可以简单position元素absolute就像内置字幕一样设置top / bottom，left / {{1} }偏移。

请注意，轮播字幕默认为right，因此您可能希望为定位元素提供更高的z-index: 10：

例如：

＆＃13;

z-index

＆＃13;

.carousel-content {
  position: absolute;
  bottom: 10%;
  left: 5%;
  z-index: 20;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

＆＃13;

Answer 2

这是一个可能的解决方案：

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>

和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;
}

假设您希望它们在图像中间垂直对齐 - 基本上，您希望相对定位幻灯片项目父div，它将从其组合高度继承它的高度图像和文字。然后，您将要创建一个div，其中包含具有css属性position: absolute的文本。该元素将是相对定位的父元素的直接子元素。这将允许您将文本绝对定位在最近的相对定位元素内。 See this CSS Tricks tutorial to understand how this works。

这将允许您将文本放在图像上，然后我继续使用表格定位以允许您垂直居中，尽管您可以继续将它们放在图像的任何位置。

Answer 3

希望它有所帮助，在我的情况下，我使用以下代码进行了操作：

<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>

在Bootstrap轮播中的图像上添加文本

3 个答案: