•  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 с фоновым изображением и исчезновения только этого?

Что-то вроде: 

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

Вы можете использовать абсолютное позиционирование для внутренних элементов.

Другие советы

Вы не можете применить непрозрачность CSS только к фоновому изображению элемента.

У вас должно быть два элемента, один из которых содержит фоновое изображение (которое вы можете исчезнуть), а другой - содержимое без затухания. Затем вы размещаете их друг над другом с помощью CSS Positioning.

Это может быть сложно, если высота элемента содержимого заранее не известна, так как вам нужно сделать фоновый элемент такой же высоты; в этом случае вам может понадобиться комбинация абсолютного позиционирования и резервного копирования скрипта для IE6.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top