2

我正在使用引导程序的轮播（http://twitter.github.com/bootstrap/javascript.html#carousel）来显示用户提交的画廊。因为它是用户提交的，所以我的网站设计的其余部分看起来不太好，这就是为什么我想在所有内容上添加图层蒙版

这是面具： http: //img52.imageshack.us/img52/2659/degrade.png 不幸的是，我无法显示那个特定的 div ......它必须是不可点击的，因为当用户点击图片时在轮播中，它会打开带有全尺寸图片的模态弹出窗口。

我的CSS（它使用较少，但你明白了）：

.carousel {
  width: 292px;
  height: 163px;

  .carousel-inner {
    width: 292px;
    height: 163px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.carousel-control {
  margin-top: 0;
  top: 0;
  right: 0;
  background: none;
  border: 0;
  width: 60px;
  height: 163px;
  opacity: 0.65;
  background-repeat: no-repeat;

    &:hover.right {
      background-image: url('/assets/index/r_arrow.png');
    }

    &:hover.left {
      background-image: url('/assets/index/l_arrow.png');
    }
}

这是我的html：

<div class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <a href="popup_img1.htm"><img src="thumbnail1.jpg" /></a>
        </div>
        <div class="item">
            <a href="popup_img2.htm"><img src="thumbnail2.jpg" /></a>
        </div>
        <div class="item">
            <a href="popup_img3.htm"><img src="thumbnail3.jpg" /></a>
        </div>
     </div>
     <a class="carousel-control left" href=".carousel" data-slide="prev">&nbsp;</a>
     <a class="carousel-control right" href=".carousel" data-slide="next">&nbsp;</a>
 </div>
4

1 回答 1

3

根据您的跨浏览器支持需求，您可以尝试提供覆盖pointer-events: none。这是一个例子。

如果你插入<div class="overlay"></div>到.carousel-inner，给.carousel-inner {position: relative;}和

.overlay {
    background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

这里有一个答案，它提供了使用 javascript 的解决方案的信息和链接。不幸的是，已接受链接问题答案的资源已下线，但这里有一个相当简单的演示：http: //jsbin.com/uhuto

于 2012-09-11T14:26:36.427 回答