Question

目前，我正在使用 HTML、CSS 和 JavaScript 制作游戏。现在我在网站的起始页并且遇到了位置问题。

当我调整屏幕大小时，我希望我的“开始按钮/图像”与背景一起调整到相同的位置。现在我的“按钮”不会跟随并且当它足够小时它们会从屏幕上消失。 HTML 中有一些类用于动画和 JavaScript，所以不要介意。

我一直在这里寻找类似的问题，但在我尝试实施时仍然没有弄明白。

#screen {
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  width: 50w;
  height: 55vw;
  border: 2px red solid;
  overflow: hidden;
}

#game_start {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

#start_button {
  width: 35vw;
  height: 35vw;
  position: absolute;
  top: 50px;
  z-index: 3;
  padding-top: 448px;
  padding-left: 362px;
}

#start_button_2 {
  width: 35vw;
  height: 35vw;
  position: absolute;
  top: 50px;
  z-index: 2;
  padding-top: 457px;
  padding-left: 366px;
}

<main>
  <section id="screen">
    <div id="game_start" class="hidden">
      <img src="Assets copy.SVG/HOMESCREEN.svg" alt="StartScreen"></div>
    <div id="start_button" alt="start" class="button">
      <a href="index_new.html">
        <span class="blink"><img src="Assets copy.SVG/START.GREEN.svg"></span></a>
    </div>
    <div id="start_button_2" alt="start" class="button">
      <a href="index_new.html">
        <img src="Assets copy.SVG/START.GREY.svg"></a>
    </div>
  </section>
</main>

调整屏幕大小时图片保持在同一位置的问题

0 个答案: