如何在Blazor WebAssembly(PWA)中实现图片指定位置添加文本框功能

方案1：CSS相对定位+绝对定位组合（推荐，无需处理SVG） #

核心逻辑是把图片和所有输入框放在同一个父容器内，通过百分比定位实现输入框和图片的位置绑定，图片缩放时位置也不会偏移。

<!-- 页面razor代码 -->
<div class="img-form-container">
    <!-- 底层背景图 -->
    <img src="你的图片路径.png" alt="背景图" class="bg-img" />
    <!-- 第一个输入框，top和left值根据你的需求调整百分比 -->
    <input type="text" @bind="FormValue1" class="form-input" style="top:23%;left:45%;width:120px;" />
    <!-- 第二个输入框，按需添加 -->
    <input type="text" @bind="FormValue2" class="form-input" style="top:67%;left:18%;width:90px;" />
</div>

@code {
    private string FormValue1 { get; set; }
    private string FormValue2 { get; set; }
}

对应的样式代码：

.img-form-container {
    position: relative;
    width: 100%;
    /* 替换为你的图片实际宽高比，比如图片宽1920高1080就写16/9 */
    aspect-ratio: 16/9;
}
.bg-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.form-input {
    position: absolute;
    transform: translate(-50%, -50%); /* 让输入框的中心对准你设置的坐标点，校准位置更方便 */
    border: 1px solid #ccc;
    padding: 2px 4px;
}

位置校准方法：浏览器打开页面按F12，直接在元素面板调整输入框的top和left百分比，调整到目标位置后把数值复制到代码里即可，不需要复杂的坐标计算。

方案2：多点位动态渲染 #

如果需要放置的输入框数量多，可以提前把所有点位的参数配置成数组，循环渲染即可，方便后续维护修改：

<div class="img-form-container">
    <img src="你的图片路径.png" alt="背景图" class="bg-img" />
    @foreach (var item in InputPoints)
    {
        <input type="text" @bind="item.Value" 
               class="form-input" 
               style="@($"top:{item.TopPercent}%;left:{item.LeftPercent}%;width:{item.Width}px;")" />
    }
</div>

@code {
    // 点位配置类，可按需扩展字段名、校验规则等
    public class FormInputPoint
    {
        public double TopPercent { get; set; }
        public double LeftPercent { get; set; }
        public int Width { get; set; } = 100;
        public string Value { get; set; }
    }

    private List<FormInputPoint> InputPoints = new()
    {
        new FormInputPoint{ TopPercent=23, LeftPercent=45, Width=120 },
        new FormInputPoint{ TopPercent=67, LeftPercent=18, Width=90 }
    };
}

注意事项 #

• 确保父容器的aspect-ratio和原图的宽高比完全一致，避免图片拉伸变形导致位置偏移
• 如果图片需要支持放大缩小查看，给父容器加overflow: auto，输入框会跟随图片同步滚动

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