占位图片生成器

功能说明

做原型、设计稿或前端布局时，经常需要一张临时图片占位：尺寸固定、内容简单、随时可换。本工具可以按你指定的宽高、配色和文字实时生成占位图，并支持下载 PNG 或复制 Base64 直接写进代码。

内置了几种常用尺寸快捷键：社交分享图 1200×630、电商主图 750×750、常见演示尺寸 1920×1080，一键切换。

图片在浏览器本地绘制，不消耗流量、不需上传，断网可用。

使用步骤

1. 填写宽高（1-4000 px），或点下方快捷键套用常用尺寸。

2. 选择背景色与文字颜色，输入要显示的文字（例如"商品主图"）。

3. 预览满意后点下载 PNG；前端开发可直接点复制 Base64 粘贴到 CSS 或 img src。

常见问题

Q：文字太大或太小怎么办？
A：文字大小会随图片高度自动缩放；尺寸特别极端时可以适当增大高度。

Q：能生成透明背景吗？
A：可以，把背景色选成白色后下载 PNG，再用图片工具转透明；如需直接输出透明底请告诉我。

你可能还想问

占位图一般用在什么场景？

前端开发与设计稿评审：页面还没接真实图片时先用占位图占住布局，验证响应式与排版；上线前把 src 换成真实资源即可，链接参数化后批量替换很方便。

可以指定文字和颜色吗？

可以自定义尺寸、背景色、文字内容；写上真实尺寸（如 400×300）还能顺带当作设计沟通工具，让合作方一眼看出预留位置的大小。

上线后忘了替换占位图怎么办？

建议占位图文字统一带 placeholder 字样或用非常规颜色（亮粉、亮绿），上线前全局搜索 src 里的占位域名；CI 流程里加图片域名白名单检查更保险。

相关工具

相关内容