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
左側留白較大,適配左側導航欄。