高级功能 — 交互式 API 调试

60 种多语言字体、5000+ 图标、9 种图片格式、渐变纹理、文本高亮 — 每个参数都可以实时预览和调试

MockImg 占位图实时预览
基础设置
×
比例
无留白
极紧凑1/20
紧凑1/10
适中1/8
宽松1/6
标准1/5
很宽松1/4
超宽松1/3
上下 + 左右
短文本1/10,1/20
横幅标题1/4,1/20
上 / 右 / 下 / 左
标题区域40,10,5,10
左侧导航20,10,20,60
文字样式
自动
背景与边框
100%
关闭
85
图标设置
自动

图标系统

集成 5000+ Tabler Icons,支持 Outline 和 Filled 两种风格,可自定义大小

图标大小 48
Tabler Icons 图标预览

文档与参考

完整的 API 参数速查表、文本内联高亮使用指南、纯图标显示模式

基础语法

text 参数中使用 {{...}} 包裹需要高亮的文字部分。所有高亮段落共享相同的样式设置。提示:也可以直接在页面上方的文字内容输入框中输入 {{...}} 标记,系统会自动识别并应用高亮效果。

# 语法格式
?text=普通文本{{高亮文本}}继续普通文本
&hlcolor=FF5733

参数详解

hlcolor 高亮颜色

设置高亮文字的颜色,支持 HEX 格式(如 FF5733)或颜色名称(如 red)。

示例: ?text=Mock{{Img}}.Dev&hlcolor=FF5733
hlcolor2 高亮渐变色 2

设置高亮渐变的第二个颜色。设置此参数后自动启用渐变效果,hlcolor 作为渐变起点色。

示例: ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6
hlgradient 高亮渐变方向

设置高亮渐变的方向。不设置时默认 horizontal(水平)。

horizontal 水平(从左到右) vertical 垂直(从上到下) diagonal 对角(左上到右下)
示例: ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical
hlfont 高亮字体

为高亮文字指定独立字体,不影响其余文本的字体。参数值为字体文件名(不含 .ttf 后缀)。

示例: ?text={{Brand}}&hlfont=Poppins-Bold
hlbold 高亮加粗

使高亮文字加粗。参数值为 true1

示例: ?text={{Important}}&hlbold=true

完整示例

示例 1:纯色高亮
https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

效果:"MockImg.Dev" — Img 显示为红色

示例 2:渐变高亮
https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

效果:"Gradient" 显示为粉色到紫色的水平渐变

示例 3:独立字体高亮
https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

效果:"MockImg" 使用 Poppins-Bold 字体并显示为蓝色

示例 4:加粗高亮
https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

效果:"Important" 显示为红色加粗

示例 5:组合使用(渐变 + 字体 + 加粗)
https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

效果:"Premium" 使用对角渐变(金色到红色)并以 Montserrat-Bold 字体显示

示例 6:多段落高亮
https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

效果:"MockImg" 和 "占位图" 都显示为蓝色(共享相同高亮样式)

示例 7:中文高亮
https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

效果:"MockImg" 显示为绿色,其余文字使用默认颜色

示例 8:暗色主题 + 高亮
https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

效果:在暗色主题下,"Mode" 显示为金色高亮

注意事项

  • {{...}} 标记不计入文字宽度计算,不影响排版布局
  • 不支持嵌套的 {{...}} 标记,嵌套时内层标记被视为普通文本
  • 所有高亮段落共享相同的 hl* 样式设置
  • 高亮功能适用于所有输出格式(SVG、PNG、JPEG、WebP、AVIF 等)
  • 多行文本中的高亮标记同样有效(使用 \n 换行)

触发条件

  • 提供了 icon 参数
  • 未提供 text 参数,或 text 为空

图标尺寸规则

自动:图标尺寸 = 图片较短边的 80%(最小 24px,最大 90%)

自定义:使用 iconsize 参数覆盖自动计算

示例

纯色图标
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733

效果:红色心形图标自动放大居中

渐变图标
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal

效果:星星图标带金色到红色对角渐变

透明背景 + 图标
https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

效果:用户图标在透明背景上——完美用于头像

渐变背景 + 圆角
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

效果:白色心形图标在粉色渐变背景上,带圆角

暗色主题 + 图标
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

效果:金色星星图标在暗色背景上

圆形边框(头像)
https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

效果:用户图标在带边框的圆形中——非常适合头像占位图

图标+文字 vs 纯图标

模式 URL 效果
纯图标(无文字) ?icon=outline/heart 图标自动放大居中,无文字
图标 + 空文字 ?icon=outline/heart&text= 与纯图标模式相同
图标 + 文字 ?icon=outline/heart&text=Love 图标和文字并排显示(原始行为)
无图标无文字 600x400.png 尺寸文字(默认行为)

注意事项

  • 适用于所有输出格式(SVG、PNG、JPEG、WebP、AVIF 等)
  • 所有图标参数(iconcoloriconcolor2icongradienticonsize)均可正常使用
  • 所有背景效果(透明、渐变、图案、噪点、边框、圆角)均可与纯图标模式组合使用
  • 小尺寸同样适用——非常适合网站图标:32x32.ico?icon=filled/star&iconcolor=FFD700

概述

padding 参数控制占位图中文字和图标四周的留白区域大小。支持 4 种格式:统一像素值、统一比例值、两值(上下 + 左右)、四值(CSS 顺时针)。

# 支持的格式
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

默认行为

不传 padding 参数时,使用内置默认留空(与旧版本行为完全一致):

左右各留图片宽度的 5% 上下各留图片高度的 20%

格式说明

20 统一像素值

所有四边使用相同的像素值。

padding=20
1/6 统一比例值

所有四边按比例留空。上下基于图片高度,左右基于图片宽度。计算结果自动四舍五入取整。

padding=1/6  →  600×400 → 上下 67px,左右 100px
10,20 两值(上下 + 左右)

分别控制垂直和水平方向的留空,像素和比例可混用。

padding=10,20  →  上下各 10px,左右各 20px
padding=1/8,15  →  上下 = 高度/8,左右各 15px
padding=30,1/10  →  上下各 30px,左右 = 宽度/10
10,20,30,40 四值(CSS 顺时针)

CSS 风格的四边独立控制:上、右、下、左。上下基于图片高度,左右基于图片宽度。像素和比例可混用。

padding=10,20,30,40  →  上10 右20 下30 左40(全像素)
padding=1/8,1/6,15,1/10  →  上 h/8 右 w/6 下 15px 左 w/10(混合)

使用示例

短文本 — 减少留白
https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

短文本如 "IP" 使用 padding=1/10 获得更紧凑的布局。

零留白
https://mockimg.dev/600x400.svg?text=Full&padding=0

设置 padding=0 让内容占满整个图片区域。

图标 + 文字 — 紧凑布局
https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

图标和文字并排显示,使用适中留白。

标题区域 — 上方大留白
https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

上方留白较大,营造标题区域感,底部紧凑。

左侧导航 — 左侧大留白
https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

左侧留白较大,适配左侧导航栏。

注意事项

  • 比例值中的分子和分母必须为正数
  • 像素值不能为负数,负数会被自动修正为 0
  • 比例计算结果自动四舍五入取整,不会出现小数像素
  • padding 值过大时(超过图片尺寸的一半),可能导致内容区域过小甚至为零,字号会自动降至最小值 12px