60 种多语言字体、5000+ 图标、9 种图片格式、渐变纹理、文本高亮 — 每个参数都可以实时预览和调试
—1/201/101/81/61/51/41/31/10,1/201/4,1/2040,10,5,1020,10,20,60集成 5000+ Tabler Icons,支持 Outline 和 Filled 两种风格,可自定义大小
完整的 API 参数速查表、文本内联高亮使用指南、纯图标显示模式
在 text 参数中使用 {{...}} 包裹需要高亮的文字部分。所有高亮段落共享相同的样式设置。提示:也可以直接在页面上方的文字内容输入框中输入 {{...}} 标记,系统会自动识别并应用高亮效果。
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
高亮加粗
使高亮文字加粗。参数值为 true 或 1。
?text={{Important}}&hlbold=true
https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733
效果:"MockImg.Dev" — Img 显示为红色
https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6
效果:"Gradient" 显示为粉色到紫色的水平渐变
https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6
效果:"MockImg" 使用 Poppins-Bold 字体并显示为蓝色
https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444
效果:"Important" 显示为红色加粗
https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold
效果:"Premium" 使用对角渐变(金色到红色)并以 Montserrat-Bold 字体显示
https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6
效果:"MockImg" 和 "占位图" 都显示为蓝色(共享相同高亮样式)
https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981
效果:"MockImg" 显示为绿色,其余文字使用默认颜色
https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24
效果:在暗色主题下,"Mode" 显示为金色高亮
{{...}} 标记不计入文字宽度计算,不影响排版布局{{...}} 标记,嵌套时内层标记被视为普通文本hl* 样式设置\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
效果:用户图标在带边框的圆形中——非常适合头像占位图
| 模式 | URL | 效果 |
|---|---|---|
| 纯图标(无文字) | ?icon=outline/heart |
图标自动放大居中,无文字 |
| 图标 + 空文字 | ?icon=outline/heart&text= |
与纯图标模式相同 |
| 图标 + 文字 | ?icon=outline/heart&text=Love |
图标和文字并排显示(原始行为) |
| 无图标无文字 | 600x400.png |
尺寸文字(默认行为) |
iconcolor、iconcolor2、icongradient、iconsize)均可正常使用32x32.ico?icon=filled/star&iconcolor=FFD700padding 参数控制占位图中文字和图标四周的留白区域大小。支持 4 种格式:统一像素值、统一比例值、两值(上下 + 左右)、四值(CSS 顺时针)。
不传 padding 参数时,使用内置默认留空(与旧版本行为完全一致):
20
统一像素值
所有四边使用相同的像素值。
padding=20
1/6
统一比例值
所有四边按比例留空。上下基于图片高度,左右基于图片宽度。计算结果自动四舍五入取整。
padding=1/6 → 600×400 → 上下 67px,左右 100px 10,20
两值(上下 + 左右)
分别控制垂直和水平方向的留空,像素和比例可混用。
padding=10,20 → 上下各 10px,左右各 20pxpadding=1/8,15 → 上下 = 高度/8,左右各 15pxpadding=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
左侧留白较大,适配左侧导航栏。