占位图生成器
以任意尺寸生成自定义占位图，可设置背景色、文字颜色和标签，并下载为 PNG、JPG、WebP 或 SVG。
正在加载工具…
占位图生成器 — 设置以像素为单位的宽度和高度，选择背景色和文字颜色，输入可选的标签，工具便会绘制一张居中的占位图，并随你的输入实时预览。选择 PNG、JPG、WebP 或 SVG，点击一下即可下载结果。所有内容都使用浏览器内置的 canvas 和 SVG 接口渲染，你输入的任何信息都不会上传到服务器。
占位图生成器 是什么？
占位图生成器是一款免费的浏览器内工具，专为在搭建布局、原型或组件库时需要快速填充图的设计师和前端开发者打造。你可以设置精确的像素尺寸，选择背景色和文字颜色（输入 HEX 值或使用取色器），并添加一段简短标签，例如尺寸、比例或备注。如果标签留空，图片会自动绘制出宽高（例如 600×400）。结果会在实时预览中即时更新，你可以将其导出为 PNG、JPG、WebP 位图，或导出为清晰且可无限缩放的 SVG，其标记也可一并复制。可用它填充原型中的图片位、测试响应式网格，或生成统一的占位缩略图。
如何使用 占位图生成器
- 输入图片的宽度和高度（像素）。
- 选择背景色和文字颜色，可输入 HEX 值或点击色块取色器。
- 输入可选的标签；留空则自动显示尺寸（例如 600×400）。
- 选择输出格式：PNG、JPG、WebP 或 SVG。
- 查看实时预览，然后点击“下载”保存图片（SVG 还可复制标记）。
示例
标准灰色占位图
设置 600×400，使用浅灰背景和柔和的灰色文字颜色，标签留空，下载一张居中显示 600×400 的 PNG——可直接填入图片位。
带标签的横幅样机
使用 1200×400 这样的宽尺寸、品牌背景色、白色文字以及“HERO”之类的标签，再导出为 WebP，得到一个轻量的样机素材。
可缩放的 SVG 头像位
选择 256×256 这样的方形尺寸，将格式切换为 SVG，并将生成的标记直接复制到你的 HTML 中，让占位图在任意缩放下都保持清晰。
常见问题
- 可以导出哪些格式？
- 四种：PNG、JPG 和 WebP 是在 canvas 上渲染的位图，SVG 则是以标记形式生成的矢量图。用“格式”下拉菜单切换；SVG 还可直接复制标记文本。
- 标签留空会怎样？
- 图片会自动居中显示自身尺寸，例如 600×400。输入你自己的标签即可替换为任意文字。
- 如何设置颜色？
- 在背景或文字字段中输入像 #e2e8f0 这样的 HEX 值，或点击小色块打开浏览器内置取色器。CSS 命名颜色也可使用。更改时预览会即时更新。
- 为什么 JPG 即使我想要透明也会填充背景？
- JPG 格式不支持透明，因此始终会绘制纯色背景以避免出现黑色区域。若需透明背景，请使用 PNG、WebP，或将颜色设为透明值的 SVG。
- 我的图片或文字会被上传到任何地方吗？
- 不会。占位图完全在你的浏览器中使用 canvas 和 SVG 接口绘制，下载也在本地进行——你输入或生成的任何内容都不会发送到服务器，因此它可离线使用并为你的工作保密。