如何让 <div> 不覆盖 HTML 中的图像？

Question

我使用

制作了一个变色背景，但背景覆盖了我的图像。我怎样才能让

留在后台？（顺便说一句，我知道在我的代码中有 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>

Answer 1

DOM 后面的元素（Document Object Model，本质上是你的 HTML）通常位于前面的元素之上。因此，最简单的解决方案是切换 img 和 div.

的顺序

如果出于某种原因无法做到这一点，您可以使用 z-index 更改 CSS 中的分层。它的值越高，受影响的元素就越多。例如。 #dog:

z-index: 99;

Answer 2

您可以将狗图像移动到 <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>

Answer 3

你可以这样做：

<!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>

如何让 <div> 不覆盖 HTML 中的图像？

How do I make <div> not cover images in HTML?

html

css

background

clipping