Web 希望图像在单击时消失吗_Web

Web 希望图像在单击时消失吗

web

Web 希望图像在单击时消失吗,web,Web,我希望符号图像在单击时消失。我尝试了多种方法，很多都在这个网站上，但仍然没有成功。你认为这是因为我的z-指数吗。具体来说，可能是符号的z索引小于背景的z索引。我是新的网络编程，所以任何帮助将非常感谢非常感谢你 html/js/css <!doctype html> <html> <head> <title> Nomad </title> <link rel = "stylesheet&quo

我希望符号图像在单击时消失。我尝试了多种方法，很多都在这个网站上，但仍然没有成功。你认为这是因为我的z-指数吗。具体来说，可能是符号的z索引小于背景的z索引。我是新的网络编程，所以任何帮助将非常感谢

非常感谢你

html/js/css

<!doctype html>
<html>
  <head>
      <title> Nomad </title>
      <link rel = "stylesheet" type = "text/css" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  </head>
  <body>
    <section>
      <img src = "bg.jpg" id = "bg">
      <img src = "moon.png" id = "moon">
      <img src = "DuneII.png" id = "mountain">
      <img src = "Stretch.png" id = "road">
      <img src="libra.png" id = "symbol">
    </section>
    <script>
      let bg = document.getElementById("bg");
      let moon = document.getElementById("moon");
      let mountain = document.getElementById("mountain");
      let road = document.getElementById("road");



      window.addEventListener('scroll', function() {
        var value = window.scrollY;

        bg.style.top = value * 0.5 + 'px';
        moon.style.left = value * 0.5 + 'px';
        mountain.style.top = -value * 0.20 + 'px';
        road.style.top = value * 0.15 + 'px';
      })

      $(document).ready(function(){
        $("#symbol").click(function(){
          $("#symbol").hide();
        });
      });


    </script>
  </body>
</html>
'''
*
{
  margin: 0;
  padding: 0;

}
body
{
  background: #0a2a43;
  min-height: 2000px;
}
section
{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

}

section:before
{
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #0a2a43, transparent);
  z-index:10000;

}
section:after
{
  content: '';
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  background: #0a2a43;
  z-index: 10000;
  mix-blend-mode: color;
}

section img
{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;


}
'''


游牧民族
设bg=document.getElementById（“bg”）；
让moon=document.getElementById（“moon”）；
let mountain=document.getElementById（“mountain”）；
let road=document.getElementById（“road”）；
addEventListener（'scroll'，function（）{
var值=window.scrollY；
bg.style.top=值*0.5+'px'；
moon.style.left=值*0.5+'px'；
mountain.style.top=-value*0.20+'px'；
road.style.top=值*0.15+'px'；
})
$（文档）.ready（函数（）{
$（“#符号”）。单击（函数（）{
$（“#符号”）.hide（）；
});
});
'''
*
{
保证金：0；
填充：0；
}
身体
{
背景：#0a2a43；
最小高度：2000px；
}
部分
{
位置：相对位置；
宽度：100%；
高度：100vh；
溢出：隐藏；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
章节：之前
{
内容：''；
位置：绝对位置；
底部：0；
宽度：100%；
高度：100px；
背景：线性渐变（至顶部，#0a2a43，透明）；
z指数：10000；
}
章节：之后
{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#0a2a43；
z指数：10000；
混合模式：颜色；
}
第img节
{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
对象匹配：覆盖；
指针事件：无；
}
'''