如何在引导元素的顶部添加一个掩码？ [英] How do i add a mask on top of a bootstrap element?

问题描述

我正在使用引导旋转木马（ http://twitter.github.com/bootstrap /javascript.html#carousel ）以显示用户提交的图片库。因为它是用户提交，它不看起来非常好与我的网站设计的其余部分，这就是为什么我想添加一个层掩码上面一切

I'm using bootstrap's carousel ( http://twitter.github.com/bootstrap/javascript.html#carousel ) to show a user submited gallery. Because it's user submited, it doesnt look very good with the rest of my website design thats why i want to add a layer mask on top off everything

这里是面具： http://img52.imageshack.us/img52/2659/degrade.png 不幸的是，我不能显示特定的div ...
它必须是不可点击，因为当用户点击旋转木马的图片，它打开模态弹出与全尺寸的图片。

Here is the mask : http://img52.imageshack.us/img52/2659/degrade.png Unfortunatly, I'm unable to show that particular div... It has to be non clickable because when a user click on a picture of the carousel, it opens modal popup with the full sized picture.

我的css（使用较少，但你得到的想法）：

My css (its using less but you get the idea):

.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');
    }
}

heres是我的html：

heres is my 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>

推荐答案

根据您的跨浏览器支持需求，请尝试给予重叠 pointer-events：none 。 这是一个例子。

Depending on your cross-browser support needs, you could try giving the overlay pointer-events: none. Here's an example of that.

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

There's an answer here that gives information and links to solutions using javascript. Unfortunately, the resources for the accepted answer to the linked question have gone offline, but there is a fairly simple demonstration here: http://jsbin.com/uhuto

这篇关于如何在引导元素的顶部添加一个掩码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！