2012-10-26 3 views
0

안녕하세요 여러분 어떻게 콘텐츠가 아닌 콘텐츠 뒤에 슬라이드하도록 빨간색 오버레이를 가져올 수 있습니까?css 오버레이 문제

.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; 
}​ 

답변

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 --> 
를 확인하시기 바랍니다
3

jsFiddle

당신은 transparent_layer 클래스와 애니메이션과 position:absolute; 수 있도록 다른 사업부를 만들 필요가 : http://jsfiddle.net/MZL5q/3/

내가 함께 노력하고 있습니다.

귀하의 프로덕션 버전 사이트에서 귀하의 페이지 상단에 없다면 귀하의 정보를 div의 일부 위치 측면을 변경해야 할 수도 있습니다. 나는이 튜토리얼을 여러 번 읽었다. CSS Positioning.

관련 문제