在线工具

工具箱 › 图片 › 占位图生成

占位图与渐变图生成

按指定尺寸在线生成渐变图、纯色块或带尺寸文字的占位图,可下载 PNG 或复制 SVG 代码直接内联进 HTML,适合开发阶段与 PPT 示意。

—输出尺寸
—PNG 体积
—宽高比

什么时候需要占位图

开发阶段缺图、或做 PPT 需要示意大图时,用它生成一张符合目标尺寸的图占位,比反复拉伸截图更直观,也不会把示意图当成正式素材发出去。

渐变角度的定义与 CSS 的 linear-gradient 一致:0° 从下往上、90° 从左往右,可以直接对照着用。

SVG 代码怎么用

复制出来的 SVG 是自包含的一小段文本,直接内联进 HTML 就能当背景或占位图用,不需要额外请求图片文件 —— 开发阶段还没定稿的图,用它比真的塞一张 PNG 进去更省事。

把宽高替换成你自己的尺寸即可,颜色改成品牌色,就是一张现成的占位图。

常见问题

生成的图是什么样子?

是渐变或纯色,不含任何图案与噪点。如果需要更真实的照片感占位图,可以先用「图片压缩」把真实照片压成小尺寸后使用。

下载的 PNG 有多大?

渐变与纯色的 PNG 体积很小,几 KB 到几十 KB,具体取决于尺寸。上方的「PNG 体积」一栏会在生成后显示实际大小。