부트 스트랩 요소 위에 마스크를 추가하려면 어떻게해야합니까?

Question

사용자가 제출 한 갤러리를 표시하기 위해 부트 스트랩의 회전식 슬라이드 쇼 (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'); 
    } 
} 

은을 heres 내 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입니다. 당신이 .carousel-inner에 <div class="overlay"></div>를 삽입하면

, 제공 .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가있다

. 유감스럽게도 링크 된 질문에 대한 답변의 리소스가 오프라인으로 전환되었지만 여기에는 매우 간단한 데모가 있습니다. http://jsbin.com/uhuto