弹出div的缩放背景

Question

我很难设置包含图像的弹出窗口。 我有一个普通的 html 文档，我尝试通过单击 div 在屏幕上打开图像。

<body>
    <div class="popup" onclick="myFunction()"><img src="sample.png"</img>
    <span class="popupcontent" id="myPopup"></span>
  </div>
        <script>
        // When the user clicks on <div>, open the popup
        function myFunction() {
          var popup = document.getElementById("myPopup");
          popup.classList.toggle("show");
        }
        </script>
</body>

CSS 规则也很简单：

.popup {
  position: fixed;
  margin:auto;
  top:0%;
  display:block;
  cursor: pointer;
  border-radius:25px;
}
.popup .popupcontent {
  width:90%;
  margin:auto;:
  position: fixed;
  visibility: hidden;
  z-index: 9999;
  background-image: url('image.png');
  background-repeat: no-repeat;
  background-size: contain;
}
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

但是，当我单击 div“弹出窗口”时，什么也没有发生。 我希望弹出窗口显示在包含定义的背景图像的屏幕中间。 这种方法有什么问题？

Answer 1

当您编写“popupcontent”时，您错过了一条规则：

这是错误的： margin:aut;:

改为这样做： margin: auto;