占位图生成器

在线占位图(Placeholder)生成器,按指定宽高、背景色、文字和格式生成占位图,适合网页设计和开发时临时占位。

工具功能

占位图生成器可以快速生成自定义尺寸、颜色、文字的占位图片,支持下载PNG和SVG两种格式。适合网页设计、原型制作时快速获取占位素材。

使用方法

  1. 输入你需要的图片宽度和高度(单位:像素,最大支持2000像素)
  2. 点击颜色选择器设置背景颜色和文字颜色
  3. 可输入自定义占位文字,留空则自动显示宽高尺寸
  4. 勾选「显示尺寸文字」可开启尺寸显示,关闭则只显示背景色
  5. 点击「生成占位图」即可预览,生成后可点击下载按钮获取PNG或SVG文件

生成原理

PNG格式使用HTML5 Canvas绘制生成,下载时导出为PNG图片文件;SVG格式直接生成矢量XML代码,体积更小,适合任意缩放不失真。

注意事项

PNG和SVG格式有什么区别,我该选哪个?

PNG是位图格式,适合用于需要像素级精度的场景;SVG是矢量格式,体积小,可以无限缩放不失真,适合作为设计素材使用。如果不确定,推荐选择SVG格式。

为什么我自定义文字不显示?

请检查:1. 是否输入了自定义文字;2. 如果未输入自定义文字,是否勾选了「显示尺寸文字」;若两项都未开启,则不会显示任何文字,只显示纯色背景。

生成的图片可以直接用在网页里吗?

可以,下载后将图片文件上传到你的服务器或图床,就可以引用到网页中了。SVG文件也可以直接内联到HTML代码中使用,减少HTTP请求。

支持透明背景吗?

当前版本暂不支持透明背景,后续版本会考虑添加该功能。目前你可以选择接近需求的背景颜色使用。