如何用jQuery将二维码永久附着在Blob背景图上？解决缩放错位问题

这个问题的核心是二维码的定位参考对象不对——你当前的二维码是相对于body（或其他上层非定位元素）使用固定像素定位的，一旦页面缩放，背景图会按比例变化，但二维码的固定像素位置不会跟着调整，自然就错位了。下面给你两种靠谱的解决方案，从纯CSS到jQuery动态计算都有，你可以根据需求选择：

方法一：纯CSS容器定位（推荐，最简单） #

我们只需要给两张图加一个相对定位的容器，让二维码的绝对定位相对于背景图所在的容器，再把固定像素位置改成百分比，就能实现缩放时自动对齐：

修改后的HTML结构： #

<!-- 新增容器，设置为相对定位，作为二维码的定位参考 -->
<div id="id-card-wrapper" style="position: relative; width: 100%; max-width: 856px; margin: 0 auto;">
  <!-- 背景图：占满容器，等比缩放 -->
  <img id="imgko" src="<?php echo json_decode($bg);?>" style="width: 100%; height: auto; display: block;">
  <!-- 二维码：相对于容器用百分比定位 -->
  <img id="qrko" src="" style="position: absolute; top: 33.3%; left: 73.6%; width: 12%; height: auto;">
</div>

怎么计算百分比？ #

假设你的背景图原始宽度是856px（身份证常用宽度）、原始高度是540px，你原来的二维码位置是top:285px、left:630px：

• 顶部百分比：(285 / 540) * 100% ≈ 33.3%
• 左侧百分比：(630 / 856) * 100% ≈ 73.6%
• 二维码宽度也建议用百分比，比如12%，这样缩放时二维码会和背景图等比放大缩小，保持比例协调。

这种方法不需要JS，完全靠CSS实现，性能最好，也最稳定。

方法二：jQuery动态计算定位（适合复杂场景） #

如果你的背景图尺寸不固定，或者不想手动计算百分比，可以用jQuery监听窗口缩放事件，动态计算二维码的位置：

代码示例： #

$(function() {
  // 定义原始参数：替换成你背景图的真实宽高和二维码的原始位置
  const bgOriginalSize = { width: 856, height: 540 };
  const qrOriginalPos = { top: 285, left: 630 };
  
  // 定位二维码的核心函数
  function positionQr() {
    const $bg = $('#imgko');
    const $qr = $('#qrko');
    
    // 计算背景图当前的缩放比例（因为背景图是等比缩放，x/y比例一致）
    const scaleRatio = $bg.width() / bgOriginalSize.width;
    
    // 给二维码设置缩放后的位置
    $qr.css({
      top: qrOriginalPos.top * scaleRatio + 'px',
      left: qrOriginalPos.left * scaleRatio + 'px'
    });
  }
  
  // 页面加载时初始化定位
  positionQr();
  
  // 窗口缩放时重新计算定位（加防抖避免频繁触发）
  $(window).on('resize', debounce(positionQr));
  
  // 防抖函数：优化性能
  function debounce(func, delay = 100) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    }
  }
});

注意事项： #

• 确保背景图的height设置为auto，保证等比缩放，这样scaleRatio的计算才准确。
• 防抖函数的作用是避免窗口缩放时频繁触发定位逻辑，提升页面流畅度。

两种方法都能解决你遇到的缩放错位问题，优先推荐纯CSS方案，代码更简洁，维护成本更低。

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