<h2>工具简介：占位图生成器能做什么？</h2>
<p>做设计稿、搭页面原型、写接口文档时，经常需要一张指定尺寸的临时图片占位。工具派「占位图生成器」可以按自定义宽度、高度、背景色、文字色和文字内容生成占位图片，内置 300×250、728×90、公众号封面、小红书、Instagram、Facebook、Twitter/X、YouTube 封面、1920×1080、1080×1920 等 12 种常用尺寸预设，支持 PNG、JPEG、WEBP、SVG 四种格式下载，也能复制 Data URL 直接嵌进 HTML/Markdown，全程浏览器本地生成。</p>
<h2>第一步：选择尺寸或预设</h2>
<p>打开工具页后，可以直接点「常用尺寸」里的预设按钮（如&quot;小红书&quot;自动填入 1242×1660），也可以在「宽度 (px)」「高度 (px)」输入框自定义尺寸。背景色和文字色支持颜色选择器和十六进制输入两种方式，默认浅灰底深灰字。</p>
<p><img src="/api/file/download?path=article/202607/1783822338279_8889.png" alt="选择尺寸或预设"></p>
<h2>第二步：设置文字与样式</h2>
<p>在「文字内容」输入框填写要显示的文字（留空则自动显示尺寸，如&quot;300 × 250&quot;）。可以调整字体（8 种可选）、字体大小（滑块或数字输入，单位是图片实际像素）和圆角。右侧预览区实时更新，下方显示预估文件大小。注意：大尺寸图片配默认 24px 字体会显得很小，把字体大小调到 100 以上才清晰可见。</p>
<p><img src="/api/file/download?path=article/202607/1783822342958_8326.png" alt="设置文字与样式"></p>
<h2>参数说明</h2>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>常用尺寸</td>
<td>按钮组</td>
<td>12 个预设：广告位/公众号/小红书/Instagram/Facebook/Twitter/YouTube/常用分辨率</td>
</tr>
<tr>
<td>宽度 / 高度</td>
<td>数字输入</td>
<td>单位 px，默认 300×250</td>
</tr>
<tr>
<td>背景色 / 文字色</td>
<td>颜色选择器</td>
<td>支持取色器和十六进制文本输入</td>
</tr>
<tr>
<td>文字内容</td>
<td>文本输入</td>
<td>留空时自动显示&quot;宽 × 高&quot;</td>
</tr>
<tr>
<td>字体</td>
<td>下拉</td>
<td>sans-serif/serif/monospace/Arial/Helvetica/Georgia/微软雅黑/苹方</td>
</tr>
<tr>
<td>圆角</td>
<td>数字输入</td>
<td>单位 px，默认 0</td>
</tr>
<tr>
<td>字体大小</td>
<td>滑块+数字</td>
<td>单位 px（图片实际像素），默认 24</td>
</tr>
<tr>
<td>输出格式</td>
<td>单选</td>
<td>PNG（默认）/ JPEG / WEBP / SVG</td>
</tr>
</tbody></table>
<h2>第三步：下载或复制Data URL</h2>
<p>确认预览效果后，点「下载 PNG」保存图片文件（文件名自动带尺寸，如 placeholder-1242x1660.png）；前端开发时点「复制 Data URL」可得到 base64 内联图片字符串，直接粘贴到 img 标签或 CSS 里使用，无需额外文件。实测下载的 1242×1660 PNG 与预览完全一致。</p>
<p><img src="/api/file/download?path=article/202607/1783822347812_223.png" alt="下载或复制Data URL"></p>
<h2>常见问题</h2>
<ul>
<li>预览里看不到文字？字体大小是图片实际像素，大图（如 1242 宽）要把字体调到 100 以上。</li>
<li>SVG 格式有什么用？矢量格式，放大不失真，适合继续在设计软件里编辑。</li>
<li>Data URL 太长怎么办？图片越大 Data URL 越长，复杂场景建议直接下载文件引用。</li>
<li>生成的图片有版权限制吗？没有，纯本地生成的纯色占位图，可自由使用。</li>
</ul>
<h2>总结与相关工具</h2>
<p>占位图生成器适合设计原型、页面开发、文档演示等场景：选尺寸 → 设文字样式 → 下载或复制，三步搞定。相关工具推荐：<a href="/tools/svg_to_png">SVG 转 PNG</a>、<a href="/tools/image_compress">图片压缩</a>、<a href="/tools/image_batch_edit">批量图片编辑器</a>、<a href="/tools/qrcode_generator">二维码生成器</a>。立即使用工具派占位图生成器，原型设计快人一步！</p>


## 工具简介：占位图生成器能做什么？

做设计稿、搭页面原型、写接口文档时，经常需要一张指定尺寸的临时图片占位。工具派「占位图生成器」可以按自定义宽度、高度、背景色、文字色和文字内容生成占位图片，内置 300×250、728×90、公众号封面、小红书、Instagram、Facebook、Twitter/X、YouTube 封面、1920×1080、1080×1920 等 12 种常用尺寸预设，支持 PNG、JPEG、WEBP、SVG 四种格式下载，也能复制 Data URL 直接嵌进 HTML/Markdown，全程浏览器本地生成。

## 第一步：选择尺寸或预设

打开工具页后，可以直接点「常用尺寸」里的预设按钮（如"小红书"自动填入 1242×1660），也可以在「宽度 (px)」「高度 (px)」输入框自定义尺寸。背景色和文字色支持颜色选择器和十六进制输入两种方式，默认浅灰底深灰字。

![选择尺寸或预设](/api/file/download?path=article/202607/1783822338279_8889.png)

## 第二步：设置文字与样式

在「文字内容」输入框填写要显示的文字（留空则自动显示尺寸，如"300 × 250"）。可以调整字体（8 种可选）、字体大小（滑块或数字输入，单位是图片实际像素）和圆角。右侧预览区实时更新，下方显示预估文件大小。注意：大尺寸图片配默认 24px 字体会显得很小，把字体大小调到 100 以上才清晰可见。

![设置文字与样式](/api/file/download?path=article/202607/1783822342958_8326.png)

## 参数说明

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| 常用尺寸 | 按钮组 | 12 个预设：广告位/公众号/小红书/Instagram/Facebook/Twitter/YouTube/常用分辨率 |
| 宽度 / 高度 | 数字输入 | 单位 px，默认 300×250 |
| 背景色 / 文字色 | 颜色选择器 | 支持取色器和十六进制文本输入 |
| 文字内容 | 文本输入 | 留空时自动显示"宽 × 高" |
| 字体 | 下拉 | sans-serif/serif/monospace/Arial/Helvetica/Georgia/微软雅黑/苹方 |
| 圆角 | 数字输入 | 单位 px，默认 0 |
| 字体大小 | 滑块+数字 | 单位 px（图片实际像素），默认 24 |
| 输出格式 | 单选 | PNG（默认）/ JPEG / WEBP / SVG |

## 第三步：下载或复制Data URL

确认预览效果后，点「下载 PNG」保存图片文件（文件名自动带尺寸，如 placeholder-1242x1660.png）；前端开发时点「复制 Data URL」可得到 base64 内联图片字符串，直接粘贴到 img 标签或 CSS 里使用，无需额外文件。实测下载的 1242×1660 PNG 与预览完全一致。

![下载或复制Data URL](/api/file/download?path=article/202607/1783822347812_223.png)

## 常见问题

- 预览里看不到文字？字体大小是图片实际像素，大图（如 1242 宽）要把字体调到 100 以上。
- SVG 格式有什么用？矢量格式，放大不失真，适合继续在设计软件里编辑。
- Data URL 太长怎么办？图片越大 Data URL 越长，复杂场景建议直接下载文件引用。
- 生成的图片有版权限制吗？没有，纯本地生成的纯色占位图，可自由使用。

## 总结与相关工具

占位图生成器适合设计原型、页面开发、文档演示等场景：选尺寸 → 设文字样式 → 下载或复制，三步搞定。相关工具推荐：[SVG 转 PNG](/tools/svg_to_png)、[图片压缩](/tools/image_compress)、[批量图片编辑器](/tools/image_batch_edit)、[二维码生成器](/tools/qrcode_generator)。立即使用工具派占位图生成器，原型设计快人一步！

免费在线占位图生成器，自定义宽高、背景色、文字和字体，内置12种社交媒体常用尺寸预设，一键下载PNG或复制Data URL。

占位图生成器教程：自定义尺寸颜色文字一键生成