2009-10-21 3 views
0

나는 다음과 같은 HTML 페이지있다 :JQuery와 div에 배경이

<body> 
    <div class="hide1" style="width:1000px; height:1000px;"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <tr> 
      <td colspan="2" align="center">Heading</td> 
     </tr> 
     <tr> 
      <td width="51%">Left1</td> 
      <td width="49%">right 1 </td> 
     </tr> 

     <tr> 
      <td>Left 2 </td> 
      <td>right 2 </td> 
     </tr> 
    </table> 
    </div> 
</body> 

클래스 hide1은 다음과 같습니다

<style> 
.hide1 { 
    background: url(back.png) no-repeat; 
} 
</style> 

및 JQUERY 기능은 다음과 같습니다

<script> 
$(document).ready(function(){ 
$("div.mover").click(function() { 
$("div.hide1").fadeTo("slow", 0.33); 
}); 
}); 
</script> 

내 문제는 그 전체 페이지가 사라집니다. 하지만 div의 배경 이미지 만 페이드하고 싶습니다. 내가 어떻게 할 수 있니?

답변

0

단지 배경 이미지로 div를 하나 더 추가하고 페이드를 희미하게하면 어떨까요? 같은

뭔가 :

<div class="wrapper"> 
    <div class="image"> 
    //FADE THIS 
    </div> 
    <div class="content"> 
    // DON'T FADE THIS 
    </div> 
</div> 

당신은 내부 div의 절대 위치를 사용할 수 있습니다.

+0

완벽하게 ... – air

0

CSS 불투명도는 요소의 배경 이미지에만 적용 할 수 없습니다.

퇴색 할 수있는 배경 이미지와 비 페이딩 콘텐츠가 포함 된 두 개의 요소가 있어야합니다. 그런 다음 CSS 위치 지정을 사용하여 서로의 위에 놓습니다.

배경 요소를 동일한 높이로 만들어야하기 때문에 내용 요소의 높이를 미리 알지 못하는 경우 까다로운 작업이 될 수 있습니다. 이 경우 IE6 용 절대 위치 지정과 스크립트 백업이 필요할 수 있습니다.