進階功能 — 互動式 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