NodeJS与Express环境中如何获取CSS背景图片URL

getComputedStyle 是浏览器端专属API，依赖DOM树构建、CSS级联计算、渲染排版全流程能力，Node.js 原生运行时没有内置DOM/CSS渲染引擎，因此无法直接运行浏览器端的DOM查询、计算样式逻辑。
要获取div上最终生效的background-image地址，需要根据业务场景选择对应方案：

该方案完全复刻真实浏览器的渲染流程，无论背景图写在外部CSS文件、内嵌style标签、元素内联样式，还是由JS动态添加，都能准确拿到最终生效的URL，和原本的浏览器端逻辑完全对齐。
实现步骤：

• 在Node侧启动无头浏览器加载目标页面，等待所有资源加载、样式渲染完成
• 在页面的浏览器上下文中执行DOM查询逻辑，提取所有背景图URL返回给Node进程
• 在Node侧完成图片批量下载

参考实现：
先安装依赖：
npm i puppeteer axios

const puppeteer = require('puppeteer');
const axios = require('axios');
const fs = require('fs');
const path = require('path');

async function fetchAndDownloadBgImages(targetPageUrl, savePath = './download-bg') {
  // 启动无头浏览器
  const browser = await puppeteer.launch({
    headless: 'new'
  });
  const page = await browser.newPage();
  // 等待页面网络空闲，确保所有样式、资源加载完成
  await page.goto(targetPageUrl, {
    waitUntil: 'networkidle2'
  });

  // 在页面上下文执行DOM查询，逻辑和原生浏览器代码一致
  const bgImageList = await page.evaluate(() => {
    const urlSet = new Set();
    const allDivs = document.querySelectorAll('div');
    allDivs.forEach(div => {
      const bgStyle = window.getComputedStyle(div).getPropertyValue('background-image');
      if (bgStyle && bgStyle !== 'none') {
        // 解析url()包裹的真实地址
        const urlMatch = bgStyle.match(/url\(["']?([^"')]+)["']?\)/);
        if (urlMatch?.[1]) urlSet.add(urlMatch[1]);
      }
    });
    return Array.from(urlSet);
  });

  await browser.close();

  // 批量下载图片
  if (!fs.existsSync(savePath)) {
    fs.mkdirSync(savePath, { recursive: true });
  }
  for (const imgUrl of bgImageList) {
    // 可自行补充相对路径转绝对路径的逻辑
    const res = await axios.get(imgUrl, { responseType: 'arraybuffer' });
    const fileName = path.basename(new URL(imgUrl).pathname);
    fs.writeFileSync(path.join(savePath, fileName), res.data);
  }

  return bgImageList;
}

// 调用示例
// fetchAndDownloadBgImages('http://你要抓取的目标页面地址')

如果目标页面没有动态JS渲染内容，所有DOM和样式都是服务端直出的静态内容，可以不用启动无头浏览器，直接静态解析提取：

• 拉取目标页面的HTML文本，解析出所有div节点
• 提取页面内所有style标签、外部CSS文件的内容，根据CSS选择器匹配每个div对应的样式规则，同时提取div内联style里的background-image值
• 注意：该方案无法处理JS动态修改的样式、CSS优先级覆盖、伪元素背景图等场景，存在漏判、误判可能，仅适合简单静态页面使用。

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