0

このフルスクリーン スライドショーの body タグに png オーバーレイを追加したいと思います:デモ ページ

しかし、私はこれをうまくやることができません。最初の画像が読み込まれるときを除いて、ボディにクラス「ラスター」を追加します。

if(photoObject.image == "home.jpg" ) {
    $("body").removeClass("raster");
    }
    else {
        $("body").addClass("raster");
    }

問題は、高い z-index を設定しても、raster.png が表示されないことです。

推測はありますか？

前もって感謝します。

4

3 に答える 3

1

z-indexに aを設定することはできませんbody。ブロック要素である必要があります。ラスターの div を作成してみてください。

<div id="raster"></div>

CSS:

#raster {
    display: none;
    background: url(../images/raster2.png) repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

次に、ボディにクラスを追加する代わりに、div を表示/非表示にします。

if(photoObject.image == "home.jpg" ) {
    $('#raster').hide();
} else {
    $('#raster').show();
}
于 2012-10-25T21:42:04.770 に答える
0

本文の HTML のオーバーレイとして機能する div を作成する必要があります。

<body>
<img class="ac_bgimage" alt="Background" src="img/default.jpg" style="width: 1600px; height: 1062.29px; left: 0px; top: -310.643px; display: inline;">
<div class="ac_overlay"></div>
<div class="ac_loading" style="display: none;"></div>
</body>

div の css は次のようになります。

.ac_overlay {
background: url("img/pattern.png") repeat scroll left top transparent;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}

お楽しみください :D

于 2012-10-25T21:49:46.907 に答える
0

別の解決策は、ボディ上の div を非表示にして、必要なときに表示させることです。

于 2012-10-25T21:50:12.287 に答える