如何让密码表单与Windows XP登录背景图对齐且页面缩放时保持适配？

要让密码输入框精准贴合背景图里的密码框，且页面缩放时不偏移，核心是让表单元素和背景图共享同一个基准容器，用百分比定位和尺寸控制相对比例。以下是修改后的实现方案：

调整后的完整代码 #

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>the meadow</title>
  <style>
    body {
      background-color: black;
      margin: 0;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      align-items: flex-start; /* 保持和原背景位置一致，顶部居中 */
    }

    /* 背景容器：作为表单和背景图的基准 */
    .login-container {
      position: relative;
      max-width: 100%; /* 不超出屏幕宽度 */
      max-height: 100vh; /* 不超出屏幕高度 */
      width: auto;
      height: auto;
    }

    .login-bg {
      width: 100%;
      height: auto;
      display: block;
    }

    /* 屏幕阅读器专用的替代文本 */
    .alt {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }

    /* 便利贴：相对于容器定位 */
    .sticky {
      position: absolute;
      left: 70%; /* 根据背景图位置调整 */
      top: 20%; /* 根据背景图位置调整 */
      width: 20%;
    }

    /* 密码输入框：精准定位 */
    #pwd {
      position: absolute;
      /* 以下数值根据你的背景图实际位置调整，用百分比确保缩放对齐 */
      left: 35%; 
      top: 65%;
      width: 30%;
      height: 5%;
      /* 可选：去掉输入框默认样式，贴合背景 */
      border: none;
      background: transparent;
      color: white;
      font-size: 1.2vw; /* 用vw适配缩放时的字体大小 */
      padding: 0 5px;
    }
  </style>
</head>

<body>
  <div class="login-container">
    <!-- 屏幕阅读器用的替代图 -->
    <div class="alt">
      <img src="images/meadowlogin.png" alt="Windows XP风格登录界面，标题为'Microsoft Meadows XP'，包含访客用户和选中状态的'The Meadow'用户">
    </div>
    <!-- 显示的背景图 -->
    <img class="login-bg" src="images/meadowlogin.png" alt="">
    <!-- 便利贴 -->
    <img class="sticky" src="images/password.png" alt="屏幕上贴的便利贴，写着'Password 1234'和笑脸">
    <!-- 密码表单 -->
    <form>
      <input type="password" id="pwd" name="pwd">
    </form>
  </div>
</body>
</html>

关键调整说明 #

• 容器基准：新增.login-container作为相对定位容器，背景图和所有元素都放在里面，确保所有定位都基于这个容器，避免受body尺寸变化影响。
• 百分比定位：输入框和便利贴的left/top/width/height都用百分比，这样容器缩放时，元素会按比例跟着移动和调整大小，始终贴合背景图位置。
• 背景图处理：把原来的body背景改成容器内的<img>标签，配合width:100%; height:auto;自动保持图片比例，比body背景的contain更容易控制元素对齐。
• 字体适配：输入框字体用vw单位，页面缩放时字体大小也会跟着比例调整，保持和背景图的视觉协调。

你需要根据自己的背景图实际尺寸，微调#pwd的left/top/width/height百分比数值，直到完全贴合密码框位置。

内容的提问来源于stack exchange，提问作者bythemeadow