在线占位图生成器
图像处理
在线生成自定义尺寸、背景色、文字的占位图，支持实时预览和批量生成，适用于网页设计、UI开发、原型制作
常用尺寸预设
颜色预设
Aa
浅灰 Aa
深灰 Aa
蓝色 Aa
绿色 Aa
橙色 Aa
红色 Aa
紫色 Aa
青色 Aa
黑色 Aa
白色 Aa
暖灰 Aa
深蓝尺寸设置
样式设置
输出设置
实时预览
800 x 400
嵌入代码
HTML
Markdown
CSS
工具说明
工具介绍
在线占位图生成器，可自定义尺寸、背景色、文字内容，实时预览生成效果。支持多种输出格式和代码嵌入，适用于网页设计、UI开发、原型制作、文档编写等场景。
使用步骤
选择尺寸
选择预设尺寸或自定义宽高
设置样式
选择背景色、文字颜色、字体等
预览效果
实时预览占位图效果
下载/嵌入
下载图片或复制嵌入代码
功能特性
16种常用尺寸预设，覆盖Banner、卡片、头像、图标等场景
12种配色方案，一键应用专业配色
配置变化即时反映到预览区，所见即所得
生成 HTML/Markdown/CSS 代码，方便直接嵌入项目
常见问题
Q1: 占位图有什么用途？
占位图用于网页设计、UI开发阶段，在真实图片未准备好时作为临时替代，帮助预览整体布局和效果。
Q2: 如何选择输出格式？
PNG 无损适合纯色占位图；JPEG 体积小适合大尺寸；WebP 现代格式，兼容性好且体积最小。
Q3: 字体大小如何设置？
设为 0 时自动根据图片尺寸计算合适的字体大小（取宽高较小值的 1/10）。也可手动指定固定像素值。
Q4: 如何嵌入到项目中使用？
切换到「嵌入代码」标签页，选择 HTML/Markdown/CSS 格式，复制代码后直接粘贴到项目文件中即可。
使用场景
| 场景 | 说明 |
|---|---|
| 网页设计 | 在页面布局中使用占位图预览效果 |
| UI 开发 | 前端开发时替代未准备好的图片资源 |
| 原型制作 | 快速制作产品原型中的图片占位 |
| 文档编写 | 技术文档中示意图片位置和尺寸 |
| 演示文稿 | PPT 中预留图片区域展示 |
| 测试数据 | 自动化测试中生成测试图片素材 |