•  05-07-2019
  •  | 
  •  

문제

다음 HTML 페이지가 있습니다.

<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의 배경 이미지를 희미하게 만들고 싶다. 어떻게 할 수 있습니까?

도움이 되었습니까?

해결책

배경 이미지만으로 하나를 더 추가하고 그 것만 페이딩하는 것은 어떻습니까?

같은 것 :

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

내부 Divs에 절대 포지셔닝을 사용할 수 있습니다.

다른 팁

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

배경 이미지 (페이드 할 수있는)가 포함 된 두 가지 요소와 다른 하나는 비전없는 컨텐츠를 포함해야합니다. 그런 다음 CSS 포지셔닝을 사용하여 서로 위에 놓습니다.

배경 요소를 동일한 높이로 만들어야하므로 콘텐츠 요소의 높이가 미리 알려지지 않으면 까다로울 수 있습니다. 이 경우 IE6에 대한 절대 포지셔닝과 스크립트 백업의 조합이 필요할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top