如何在透明图片或Div内缩放背景图？支持Canvas/JavaScript实现

当然没问题！用 Canvas + JavaScript 完全能搞定背景图的缩放+模糊效果，全程不用碰任何图像编辑软件。我给你捋清楚具体思路和可直接运行的代码示例：

• 缩放：利用 Canvas 的 drawImage() 方法，通过指定目标宽高实现图片缩放，还能轻松控制缩放比例和居中对齐。
• 模糊：用 Canvas 原生的 filter 属性，设置 blur() 滤镜就能快速实现背景模糊，数值越大模糊程度越高。

先上 HTML 结构，我们需要一个容器放 Canvas 和前景内容：

<div class="bg-container">
  <canvas id="backgroundCanvas"></canvas>
  <div class="foreground-content">
    <h1>这是前景标题</h1>
    <p>背景是缩放+模糊后的图片</p>
  </div>
</div>

然后是 CSS，用来定位元素，让 Canvas 铺满整个窗口：

.bg-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#backgroundCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.foreground-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

最后是 JavaScript 核心逻辑，处理图片加载、缩放计算和模糊绘制：

const canvas = document.getElementById('backgroundCanvas');
const ctx = canvas.getContext('2d');
const bgImageSrc = 'your-background-image.jpg'; // 替换成你的背景图路径

// 适配窗口大小，保证Canvas始终铺满屏幕
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  renderBackground();
}

// 渲染缩放+模糊的背景图
function renderBackground() {
  const bgImg = new Image();
  bgImg.src = bgImageSrc;
  
  bgImg.onload = function() {
    // 计算缩放比例：让图片完全覆盖Canvas，保持原比例（避免拉伸变形）
    const scaleRatio = Math.max(
      canvas.width / bgImg.width,
      canvas.height / bgImg.height
    );
    
    // 缩放后的图片尺寸
    const scaledWidth = bgImg.width * scaleRatio;
    const scaledHeight = bgImg.height * scaleRatio;
    
    // 让缩放后的图片居中显示
    const offsetX = (canvas.width - scaledWidth) / 2;
    const offsetY = (canvas.height - scaledHeight) / 2;
    
    // 应用模糊滤镜（可调整px值改变模糊程度）
    ctx.filter = 'blur(10px)';
    
    // 绘制缩放后的背景图
    ctx.drawImage(
      bgImg,
      offsetX, offsetY,
      scaledWidth, scaledHeight
    );
    
    // 重置滤镜，防止影响后续可能的其他绘制
    ctx.filter = 'none';
  };
}

// 监听窗口大小变化，实时重绘
window.addEventListener('resize', resizeCanvas);

// 初始化渲染
resizeCanvas();

• 修改模糊强度：把 blur(10px) 里的数值改大或改小，比如 blur(5px) 是轻微模糊，blur(15px) 是强模糊。
• 固定缩放比例：如果不想让图片自适应窗口覆盖，而是固定放大/缩小比例，直接把 scaleRatio 设为固定值，比如 const scaleRatio = 1.2;（放大1.2倍），然后重新计算偏移量即可。
• 添加其他滤镜：除了模糊，还可以叠加其他滤镜，比如 ctx.filter = 'blur(8px) brightness(0.8)'; 让背景更暗，突出前景内容。

这样就完全不需要图像编辑软件，纯前端代码实现你想要的效果啦。

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