Question

我希望我的Bootstrap轮播在图像上方有一个虚线覆盖。旋转木马标题应位于虚线叠加层上方。我无法使用z-index。

我做错了吗？（可能安静： - ））

这是迄今为止我所掌握的JS小提琴。

HTML：

<div class="banner">
<div class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://i.imgur.com/8hAR6s4.jpg" />
            <div class="carousel-caption">This is a caption of image 1.</div>
        </div>
        <div class="item">
            <img src="http://i.imgur.com/BPSXgEp.jpg" />
            <div class="carousel-caption">This is a caption of image 2.</div>
        </div>
    </div>
    <div class="overlay"></div>
</div>

CSS：

.carousel, .carousel-inner {
height: 350px;
}

.overlay {
background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 100px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  font-size:22px;
 }

Answer 1

在<a href="../files/...">One (FileType Filesize)</a>

的每个部分添加<div class="overlay"></div>

<强> HTML

.item

小提琴：http://jsfiddle.net/r4x99ecf/51/

Answer 2

你可以像Srinivas那样说，或者你可以这样做

http://jsfiddle.net/766omu70/1/

<div class="banner">
    <div class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://i.imgur.com/8hAR6s4.jpg" />
                <div class="carousel-caption">This is a caption of image 1.</div>
            </div>
            <div class="item">
                <img src="http://i.imgur.com/BPSXgEp.jpg" />
                <div class="carousel-caption">This is a caption of image 2.</div>
            </div>
            <div class="item">
                <img src="http://i.imgur.com/Vk1Y6v0.jpg" />
                <div class="carousel-caption">This is a caption of image 3.</div>
            </div>
        </div>
    </div>
</div>

CSS：

.carousel, .carousel-inner {
    height: 350px;
}

.item:before{
    content:"";
    background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 100px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  font-size:22px;
}

我将叠加层设为伪元素，不需要额外的div。

即使z指数较高，旋转木马标题仍保持在重叠之下

2 个答案: