Question

我正在使用bootstrap的轮播（http://twitter.github.com/bootstrap/javascript.html#carousel）来显示用户提交的图库。因为它是用户提交的，所以我的网站设计的其余部分看起来并不是很好，这就是为什么我要在顶部添加图层蒙版

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

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

Answer 1

根据您的跨浏览器支持需求，您可以尝试提供叠加层pointer-events: none。 Here's an example。

如果您将<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;
}

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

如何在bootstrap元素上添加一个掩码？

1 个答案: