css - 是否有向文件夹中的所有图像添加背景图像的 Grunt 任务？

Question

背景

我有一个网站的大量员工图片。每一个都是爆头，头部周围的区域是透明的:

在网站上，我为每个 img 应用了一个 background-image。

<img class="employee" src="employee_x.jpg" />

.employee {
    background:url('employee_background.jpg') center center / cover;
}

它最终看起来像:

这让我以后可以轻松地为所有图片更改图片。问题是，后台先下载，网站所有者提示后台先加载时看起来很假。

---

问题

我现在需要将所有这些组合起来并重新保存图像，将背景和员工图像一起保存。我可以使用 Photoshop 或 Paint.net 来完成此操作，但浏览每张图像需要花费大量时间。

---

目标

我希望它使用包含 employee_background.jpg 和所有其他员工照片的文件夹，然后使用背景将它们全部重新保存到 production 文件夹中。

employees/john_smith.png
employees/sally_norton.png
employees/bill_miller.png
employees/employee_background.jpg

---->

employees/production/john_smith.png
employees/production/sally_norton.png
employees/production/bill_miller.png
employees/production/employee_background.jpg  

是否有 Grunt 任务可以为我做这件事？

Answer 1

回答

不幸的是，目前没有可以做到这一点的 grunt 插件。