在图像上方添加文本

Question

我想使用css在图像上添加文本。我正在使用bootstrap。我没有使用背景图片。

 <div id="myCarousal" class="carousal slide">
            <div class="carousal-inner"> 
            <div class="item active"> 
              <img src="img/cr1.jpg">
                <div class="container active">
                  <div class="carousal-caption"> 
                  <h1>  Quiz </h1>
                  <p> Want to be part of it..</p>

                  <p> <a href="#" class="btn btn-primary btn-large">Sign Up Today</a></p>

                  </div>
                </div>
            </div>
            </div>
          </div>

CSS如下..

.carousel-caption{
    z-index:10;
    position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}
.carousel-inner > .item > img{
    position: relative;
    top: 50px;
    /*left: 0;*/
    min-width: 100%;
    height: auto;
}
.carousel-inner > .item{
    height: 500px;   
}

请帮我解决。

Answer 1

尝试为每个元素添加z-index。为了以防万一，我们为.carousel-caption中的所有内容添加了z-index，以避免在某处出现某些z-index的可能性

.carousel-inner .item img{
    position: relative;
    top: 50px;
    /*left: 0;*/
    min-width: 100%;
    height: auto;
    z-index:0;
}
.carousel-caption{
    z-index:1;
    position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}
.carousel-caption *{
    z-index:1000;
    position: relative;
}