如何使
不覆盖 HTML 中的图像？

发布于 2025-01-18 13:41:39 字数 1395 浏览 4 评论 0原文

我用了

;制作变色背景，但背景覆盖了我拥有的图像。我怎样才能使

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

原文

I used <div> to make a color changing background, but the background covers the image I have. How can I make the <div> stay in the background?
(Btw I know in my code there's 2 sections for color but deleting either of them makes the colors not work.) Here's what it looks like when run: https://the-hampsterdog-dance.glitch.me/
thanks in advance.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

找个人就嫁了吧 2025-01-25 13:41:39

您可以将狗图像移入＆lt; div id =“ dog”＆gt;＆lt;/div＆gt;中，或者目标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>

You could either move the dog image inside <div id="dog"></div> or target the body rather than #dog for the background color animation. Both approaches will work.

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

回复收藏 0 原文

不爱素颜 2025-01-25 13:41:39

DOM 中稍后的元素（文档对象模型，本质上是您的 HTML）通常位于较早的元素之上。因此，最简单的解决方案是交换 img 和 div 的顺序。

如果由于某种原因无法做到这一点，您可以使用 更改 CSS 中的分层z 索引。它的值越高，受影响的元素越位于顶部。例如对于#dog：

z-index: 99;

Elements later inside the DOM (Document Object Model, essentially your HTML) usually are positioned on top of elements earlier. So the easiest solution is to switch the order of your img and div.

If this is not possible for whatever reason, you can change the layering in CSS using z-index. The higher it’s value, the more the affected element gets on top. E.g. for #dog:

z-index: 99;

回复收藏 0 原文

木槿暧夏七纪年 2025-01-25 13:41:39

您可以做这样的事情：

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

You could do something like this:

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

回复收藏 0 原文

~没有更多了~