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

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

📁 图片👁️ 155 阅读⏱️ 4 分钟阅读🕒 2026/9/14

做设计稿、搭原型、写文档需要临时图片占位?自定义宽高、背景色、文字和字体,内置12种常用尺寸预设,支持PNG/JPEG/WEBP/SVG下载,还能复制Data URL,浏览器本地生成。

工具简介:占位图生成器能做什么?

做设计稿、搭页面原型、写接口文档时,经常需要一张指定尺寸的临时图片占位。工具派「占位图生成器」可以按自定义宽度、高度、背景色、文字色和文字内容生成占位图片,内置 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)」输入框自定义尺寸。背景色和文字色支持颜色选择器和十六进制输入两种方式,默认浅灰底深灰字。

选择尺寸或预设

第二步:设置文字与样式

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

设置文字与样式

参数说明

参数 类型 说明
常用尺寸 按钮组 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

常见问题

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

总结与相关工具

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