Я использовал <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>
Элементы, расположенные позже внутри 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>