如何将输入框与自适应背景图绑定，使其始终处于背景框内？

你现在的问题是背景图用cover自适应缩放后，表单输入框没法跟着背景里的框走，给你个实用的解决办法，核心是用百分比定位+固定定位，和背景图的缩放逻辑对齐：

具体代码修改： #

首先补全基础样式，再给表单容器设置基于视口百分比的定位和尺寸：

body {
    background-image: url('imgs/test_bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* 避免页面出现滚动条 */
}

.register-form {
    /* 和背景图一样用fixed定位，跟着视口走 */
    position: fixed;
    /* 下面的数值需要你根据自己背景图里的框实际比例调整 */
    top: 25%;    /* 框距离背景图顶部的百分比 */
    left: 35%;   /* 框距离背景图左侧的百分比 */
    width: 30%;  /* 框的宽度占背景图的百分比 */
    height: 40%; /* 框的高度占背景图的百分比 */
    /* 让输入框垂直排列，加间距 */
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.5%; /* 可选，匹配背景框的内边距 */
    box-sizing: border-box;
}

.asda {
    width: 100%;
    padding: 0.8rem 1rem;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
}

关键逻辑： #

1. 背景图用fixed和cover，缩放逻辑基于视口比例，表单容器也用position: fixed，确保定位逻辑和背景图一致。
2. 所有位置、尺寸都用百分比，这个百分比需要你用截图工具（如微信截图、PS）测量背景图里的框后计算：
   • 比如背景图原始尺寸是1920×1080，框顶部距离背景顶部270px，那top: (270/1080)*100% = 25%
   • 框宽度是576px，那width: (576/1920)*100% = 30%
3. 屏幕缩放时，百分比会跟着视口比例调整，表单就始终卡在背景的框内。

小提示： #

如果背景图宽高比和屏幕不一致，cover会裁剪部分背景，但只要你的百分比是基于原始背景图的框计算的，显示出来的区域里，表单依然会和框对齐。

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