0

こんにちは、赤いオーバーレイをコンテンツではなくコンテンツの後ろにスライドさせるにはどうすればよいですか? http://jsfiddle.net/MZL5q/3/

私は試しています：

.transparent_layer{
background: url('../images/overlay_repeat.png') repeat-y 0 0;
width:810px;
margin:0 auto;
padding-top: 14px;
height:0;
z-index: -99999;
background-color:red;
}​
4

2 に答える 2

3

jsFiddle

transparent_layerクラスでアニメーション化して作成するには、別のdivを作成する必要がありますposition:absolute;。

参考までに、これがサイトの製品版のページの上部にない場合は、の位置付けの側面を変更する必要があるかもしれませんdiv。私はこのチュートリアルを何度も読みました。CSSポジショニング。

于 2012-10-26T11:32:11.630 に答える
2

こちらのhttp://jsfiddle.net/MZL5q/13/をご覧ください。

CSS

.behind-layer {
    background: url('../images/overlay_repeat.png') repeat-y 0 0;
    width:810px;
    margin:0 auto;
    padding-top: 14px;
    height:0;
    z-index: 1;
    position:absolute;
    background-color:red;
}

.transparent_layer {
    width:810px;
    position:absolute;
    z-index:2;
}

JS

$('.behind-layer').animate({
  height: '670'
}, 5000, function() {
  // Animation complete.
  alert('completed');
});

HTML

<div class="behind-layer"></div>
<div class="transparent_layer">
<!-- THE REST OF HTML CONTENT -->
于 2012-10-26T11:35:19.100 に答える