我如何在引導程序元素上添加蒙版？

Question

我使用引導旋轉木馬（http://twitter.github.com/bootstrap/javascript.html#carousel）來顯示用戶submited畫廊。因爲它的用戶submited，它沒有看起來非常好，我的網站設計，多數民衆贊成其餘爲什麼我要上頂掉一切

這裏添加圖層蒙版是面膜：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