2

ユーザーが送信したギャラリーを表示するために、ブートストラップのカルーセル ( http://twitter.github.com/bootstrap/javascript.html#carousel ) を使用しています。ユーザーが送信したため、他の Web サイト デザインとの相性がよくないため、すべての上にレイヤー マスクを追加したいと考えています。

マスクは次のとおりです: 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

クロスブラウザー サポートのニーズに応じて、overlay を指定してみてください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 に答える