Как сделать так, чтобы <div> не закрывал изображения в HTML?

Я использовал <div> для создания фона, меняющего цвет, но фон закрывает изображение, которое у меня есть. Как я могу сделать так, чтобы <div> оставался в фоновом режиме? (Кстати, я знаю, что в моем коде есть 2 раздела для цвета, но удаление любого из них приводит к тому, что цвета не работают.) Вот как это выглядит при запуске: https://the-hampsterdog-dance.glitch.me/ заранее спасибо.

<!DOCTYPE html>
<html lang = "en">
  <head>
    <title>DANCE THE NIGHT AWAY</title>  
      
      <img
        src = "https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
        width = "140"
        height = "100"
        alt = "DANCE THE NIGHT AWAY"
      />
     
      <div id = "dog"></div>
      <style>
        

        @-webkit-keyframes bg-animation {
          15% {
            background-color: yellow;
          }
          30% {
            background-color: green;
          }
          45% {
            background-color: blue;
          }
          60% {
            background-color: purple;
          }
      
    animation: change 10s infinite;
      }
      @-webkit-keyframes change{
        25%{background-color: blue;}
        50%{background-color: green;}
        75%{background-color: purple;}        
      }
      #dog {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-animation: change 10s infinite;
}
    </style>
    </body>
  </head>
</html>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
33
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Элементы, расположенные позже внутри DOM (Объектная модель документа, по сути, ваш HTML), обычно располагаются поверх элементов, находящихся раньше. Так что самое простое решение — поменять местами ваши img и div.

Если это невозможно по какой-либо причине, вы можете изменить наслоение в CSS, используя z-index. Чем выше его значение, тем выше будет пораженный элемент. Например. для #dog:

z-index: 99;
Ответ принят как подходящий

Вы можете либо переместить изображение собаки внутрь <div id = "dog"></div>, либо выбрать body, а не #dog для анимации цвета фона. Оба подхода будут работать.

<!DOCTYPE html>
<html lang = "en">
  <head>
    </head>
  <body>
    <title>DANCE THE NIGHT AWAY</title>  
      
      <img
        src = "https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809"
        width = "140"
        height = "100"
        alt = "DANCE THE NIGHT AWAY"
      />
     
      <div id = "dog"></div>
      <style>
        

        @-webkit-keyframes bg-animation {
          15% {
            background-color: yellow;
          }
          30% {
            background-color: green;
          }
          45% {
            background-color: blue;
          }
          60% {
            background-color: purple;
          }
      
    animation: change 10s infinite;
      }
      @-webkit-keyframes change{
        25%{background-color: blue;}
        50%{background-color: green;}
        75%{background-color: purple;}        
      }
      body {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    -webkit-animation: change 10s infinite;
}
    </style>
    </body>
</html>

Вы можете сделать что-то вроде этого:

<!DOCTYPE html>
<html lang = "en">

<head>
  <title>DANCE THE NIGHT AWAY</title>
  <style>
    .foreground {
      z-index: 790909;
    }
    
    body{
          -webkit-animation: change 10s infinite;
    }
    
    @-webkit-keyframes bg-animation {
      15% {
        background-color: yellow;
      }
      30% {
        background-color: green;
      }
      45% {
        background-color: blue;
      }
      60% {
        background-color: purple;
      }
      animation: change 10s infinite;
    }
    
    @-webkit-keyframes change {
      25% {
        background-color: blue;
      }
      50% {
        background-color: green;
      }
      75% {
        background-color: purple;
      }
    }
    
    #dog {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>

<body>
  <img class = "foreground" src = "https://cdn.glitch.global/12de095f-ec41-45e3-a169-09c23630e626/tbag.gif?v=1648828203809" width = "140" height = "100" alt = "DANCE THE NIGHT AWAY" />

  <div id = "dog"></div>
</body>

</html>

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