PHP CSS 背景圖片批量下載器：CLI 腳本、相對/絕對路徑解析、遠程抓取與儲存

從 CSS 檔案提取 url(...) 背景圖片並批量下載，常用於前端資源遷移、離線封裝、設計稿素材收集。本文提供一個完整 CLI PHP 腳本：支援遠程/本地 CSS、相對路徑解析 (含 ../)、去重、副檔名過濾、分塊下載、進度顯示，並分析正則提取局限與現代化替代方案。

腳本使用方式

# 放入專案目錄，建立 images/ 資料夾
php cssImages.php 0 https://example.com/css/style.css images/
# 參數: 類型(0遠程/1本地) CSS_URL 儲存目錄

核心功能模組

['timeout'=>30, 'follow_location'=>1]]);
    $data = @file_get_contents($url, false, $ctx);
    if ($data === false) return false;

    return file_put_contents($savePath, $data) !== false;
}

// 5. 主流程
$type = $argv[1] ?? 0;
$cssUrl = $argv[2] ?? '';
$saveDir = $argv[3] ?? 'images/';

if (!$cssUrl || !is_dir($saveDir)) {
    die("Usage: php {$argv[0]} <0|1>  \n");
}

$images = getCssImagesArray($cssUrl);
$host = parse_url($cssUrl, PHP_URL_SCHEME) . '://' . parse_url($cssUrl, PHP_URL_HOST);

foreach ($images as $img) {
    $img = trim($img, "\"' \t\n\r"); // 去除引號空白
    $absUrl = isAbsolutePath($img) ? $img : resolveRelativePath($cssUrl, $img);
    $absUrl = $host . $absUrl; // 確保完整 URL

    if (downloadImage($absUrl, $saveDir)) {
        echo "✅ Downloaded: $absUrl\n";
    } else {
        echo "❌ Failed: $absUrl\n";
    }
}

正則提取的局限性

現代化替代：CSS 解析器 (推薦)

// composer require sabberworm/php-css-parser
use Sabberworm\CSS\Parser;
use Sabberworm\CSS\Property\Value\URL;

$parser = new Parser($cssContent);
$cssDoc = $parser->parse();

$urls = [];
foreach ($cssDoc->getAllDeclarationBlocks() as $block) {
    foreach ($block->getDeclarations() as $decl) {
        $value = $decl->getValue();
        if ($value instanceof URL) {
            $urls[] = $value->getUrl();
        } elseif (method_exists($value, 'getComponents')) {
            // 處理多值 (如 background-image: url(a), url(b))
            foreach ($value->getComponents() as $comp) {
                if ($comp instanceof URL) $urls[] = $comp->getUrl();
            }
        }
    }
}
// $urls 為乾淨、無引號、已解析的 URL 陣列

生產級增強清單

• 併發下載：curl_multi_* 或 amphp/http-client 非同步並發，大幅提速。
• 斷點續傳：Range 標頭 + 檔案大小比對。
• 內容驗證：下載後 getimagesize() 驗證真實圖片、mime_content_type() 驗證 MIME。
• CSS Source Map 支援：解析 .map 還原原始 SCSS/LESS 路徑。
• 去重策略：以 URL 正規化 (移除查詢字串、片段) 作為鍵，或以檔案雜湊 (MD5/SHA256) 去重。

CSS 背景圖片批量下載是前端工程化常見任務。理解正則提取的侷限，適時引入專業 CSS 解析器，配合非同步下載與完善錯誤處理，能構建穩健的資源遷移管線。