Dokumentation & Referenz

Vollständige API-Parameterreferenz, Texthervorhebungs-Leitfaden, Nur-Symbol-Anzeigemodus

Grundsyntax

hl_syntax_desc

# Syntaxformat
?text=Normaler Text{{hervorgehobener Text}}weiterer normaler Text
&hlcolor=FF5733

Parameterdetails

hlcolor hl_param_hlcolor

hl_param_hlcolor_desc

hl_example_prefix： ?text=Mock{{Img}}.Dev&hlcolor=FF5733

hlcolor2 hl_param_hlcolor2

hl_param_hlcolor2_desc

hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6

hlgradient hl_param_hlgradient

hl_param_hlgradient_desc

horizontal Horizontal (links nach rechts) vertical Vertikal (oben nach unten) diagonal Diagonal (oben-links nach unten-rechts)

hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical

hlfont hl_param_hlfont

hl_param_hlfont_desc

hl_example_prefix： ?text={{Brand}}&hlfont=Poppins-Bold

hlbold hl_param_hlbold

hl_param_hlbold_desc

hl_example_prefix： ?text={{Important}}&hlbold=true

Vollständige Beispiele

hl_example_prefix 1：hl_ex1_title

https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

hl_effect_prefix"MockImg.Dev" — Img in rot angezeigt

hl_example_prefix 2：hl_ex2_title

https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

Effekt: "Gradient" als horizontaler Rosa-bis-Lila-Gradient angezeigt

hl_example_prefix 3：hl_ex3_title

https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

Effekt: "MockImg" in blau mit Poppins-Bold-Schrift angezeigt

hl_example_prefix 4：hl_ex4_title

https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

Effekt: "Important" in rot und fett angezeigt

hl_example_prefix 5：hl_ex5_title

https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

Effekt: "Premium" mit diagonalem Gradient (Gold zu Rot) in Montserrat-Bold-Schrift angezeigt

hl_example_prefix 6：hl_ex6_title

https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

Effekt: "MockImg" und Platzhaltertext in blau angezeigt (geteilter Hervorhebungsstil)

hl_example_prefix 7：hl_ex7_title

https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

Effekt: "MockImg" in grün angezeigt, Rest verwendet Standardfarbe

hl_example_prefix 8：hl_ex8_title

https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

Effekt: Im dunklen Thema wird "Mode" in goldener Hervorhebung angezeigt

Hinweise

hl_note_1
hl_note_2
hl_note_3
hl_note_4
hl_note_5

Auslösebedingungen

icon-Parameter angegeben
Kein text-Parameter, oder text ist leer

Icon-Größenregeln

Auto: Icon-Größe = 80% der kleineren Bildabmessung (min. 24px, max. 90%)

Benutzerdefiniert: iconsize-Parameter verwenden, um die automatische Berechnung zu überschreiben

Beispiele

Einfarbiges Icon

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

Effekt: Herz-Icon automatisch vergrößert und in rot zentriert

Farbverlaufs-Icon

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

Effekt: Stern-Icon mit diagonalem Farbverlauf von Gold zu Rot

Transparent + Icon

https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

Effekt: Benutzer-Icon auf transparentem Hintergrund — perfekt für Avatare

Farbverlaufshintergrund + Abgerundet

https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

Effekt: Weißes Herz-Icon auf pinkem Farbverlauf mit abgerundeten Ecken

Dunkles Theme + Icon

https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

Effekt: Goldenes Stern-Icon auf dunklem Hintergrund

Kreisförmiger Rahmen (Avatar)

https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

Effekt: Benutzer-Icon im Kreis mit Rahmen — ideal für Avatar-Platzhalter

Icon+Text vs. Nur Icon

Modus	URL	Effekt
Nur Icon (kein Text)	`?icon=outline/heart`	Icon automatisch vergrößert und zentriert, kein Text
Icon + Leerer Text	`?icon=outline/heart&text=`	Gleich wie Nur-Icon-Modus
Icon + Text	`?icon=outline/heart&text=Love`	Icon und Text nebeneinander (ursprüngliches Verhalten)
Kein Icon, kein Text	`600x400.png`	Bemaßungstext (Standardverhalten)

Hinweise

Funktioniert mit allen Ausgabeformaten (SVG, PNG, JPEG, WebP, AVIF usw.)
Alle Icon-Parameter (iconcolor, iconcolor2, icongradient, iconsize) funktionieren wie erwartet
Alle Hintergrundeffekte (transparent, Farbverlauf, Muster, Rauschen, Rahmen, Radius) können mit dem Nur-Icon-Modus kombiniert werden
Funktioniert auch mit kleinen Größen — perfekt für Favicons: 32x32.ico?icon=filled/star&iconcolor=FFD700

Übersicht

Der Parameter padding steuert den Leerraum um Text und Symbole. 4 Formate: einheitlicher Pixelwert, einheitliches Verhältnis, zwei Werte (vertikal + horizontal), vier Werte (CSS im Uhrzeigersinn).

# Unterstützte Formate
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

Standardverhalten

Ohne padding Parameter werden die integrierten Standardwerte verwendet (wie in früheren Versionen):

Links & Rechts: 5% der Breite Oben & Unten: 20% der Höhe

Formatdetails

20 Einheitlicher Pixelwert

Alle vier Seiten verwenden denselben Pixelwert.

padding=20

1/6 Einheitliches Verhältnis

Alle vier Seiten verwenden ein Verhältnis. Oben/Unten basierend auf der Höhe, Links/Rechts basierend auf der Breite. Ergebnisse werden automatisch gerundet.

padding=1/6 → 600×400 → oben/unten 67px, links/rechts 100px

10,20 Zwei Werte (Oben/Unten + Links/Rechts)

Vertikalen und horizontalen Abstand separat steuern. Pixel und Verhältnis können gemischt werden.

padding=10,20 → oben/unten je 10px, links/rechts je 20px
padding=1/8,15 → oben/unten = Höhe/8, links/rechts je 15px
padding=30,1/10 → oben/unten je 30px, links/rechts = Breite/10

10,20,30,40 Vier Werte (CSS Uhrzeigersinn)

CSS-Stil unabhängige Steuerung: Oben, Rechts, Unten, Links. Oben/Unten basierend auf Höhe, Links/Rechts auf Breite. Pixel und Verhältnis mischbar.

padding=10,20,30,40 → Oben 10, Rechts 20, Unten 30, Links 40 (alles px)
padding=1/8,1/6,15,1/10 → Oben h/8, Rechts w/6, Unten 15px, Links w/10 (gemischt)

Beispiele

Kurzer Text — Abstand reduzieren

https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

Kurzer Text wie "IP" mit padding=1/10 für kompakteres Layout.

Kein Abstand

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

padding=0 setzen, damit der Inhalt das gesamte Bild ausfüllt.

Symbol + Text — Kompaktes Layout

https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

Symbol und Text nebeneinander mit moderatem Abstand.

Titelbereich — Oberer Abstand groß

https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

Großer oberer Abstand für Titeleffekt, unten kompakt.

Linke Navigation — Linker Abstand groß

https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

Großer linker Abstand zur Unterstützung einer Navigationsleiste.

Hinweise

Zähler und Nenner in Verhältniswerten müssen positiv sein
Pixelwerte können nicht negativ sein — negative Werte werden automatisch auf 0 korrigiert
Verhältnisergebnisse werden automatisch auf ganze Pixel gerundet
Wenn der Abstand mehr als die Hälfte der Bildabmessungen überschreitet, kann der Inhaltsbereich sehr klein werden und die Schriftgröße wird automatisch auf mindestens 12px reduziert

Erweiterte Funktionen — Interaktiver API-Debugger

Icon-System

Dokumentation & Referenz

Grundsyntax

Parameterdetails

Vollständige Beispiele

Hinweise

Auslösebedingungen

Icon-Größenregeln

Beispiele

Icon+Text vs. Nur Icon

Hinweise

Übersicht

Standardverhalten

Formatdetails

Beispiele

Hinweise