Documentation et Référence

Référence complète des paramètres API, guide de surbrillance du texte, mode icônes uniquement

Syntaxe de base

hl_syntax_desc

# Format de syntaxe
?text=Texte normal{{texte en surbrillance}}suite du texte normal
&hlcolor=FF5733

Détails des paramètres

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 (gauche à droite) vertical Vertical (haut en bas) diagonal Diagonal (haut-gauche vers bas-droite)

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

Exemples complets

hl_example_prefix 1：hl_ex1_title

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

hl_effect_prefix"MockImg.Dev" — Img affiché en rouge

hl_example_prefix 2：hl_ex2_title

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

Effet : "Gradient" affiché en dégradé horizontal rose à violet

hl_example_prefix 3：hl_ex3_title

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

Effet : "MockImg" affiché en bleu avec la police Poppins-Bold

hl_example_prefix 4：hl_ex4_title

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

Effet : "Important" affiché en rouge et en gras

hl_example_prefix 5：hl_ex5_title

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

Effet : "Premium" affiché en dégradé diagonal (or à rouge) avec la police Montserrat-Bold

hl_example_prefix 6：hl_ex6_title

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

Effet : "MockImg" et le texte substitut affichés en bleu (style de surbrillance partagé)

hl_example_prefix 7：hl_ex7_title

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

Effet : "MockImg" affiché en vert, le reste utilise la couleur par défaut

hl_example_prefix 8：hl_ex8_title

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

Effet : En thème sombre, "Mode" affiché en surbrillance dorée

Remarques

hl_note_1
hl_note_2
hl_note_3
hl_note_4
hl_note_5

Conditions de déclenchement

Paramètre icon fourni
Pas de paramètre text, ou text vide

Règles de taille de l'icône

Auto : taille de l'icône = 80% de la plus petite dimension de l'image (min 24px, max 90%)

Personnalisé : utiliser le paramètre iconsize pour remplacer le calcul automatique

Exemples

Icône de couleur unie

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

Effet : icône cœur agrandie et centrée automatiquement en rouge

Icône en dégradé

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

Effet : icône étoile avec dégradé diagonal doré vers rouge

Transparent + Icône

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

Effet : icône utilisateur sur fond transparent — parfait pour les avatars

Fond en dégradé + Arrondi

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

Effet : icône cœur blanche sur dégradé rose avec coins arrondis

Thème sombre + Icône

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

Effet : icône étoile dorée sur fond sombre

Bordure circulaire (Avatar)

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

Effet : icône utilisateur en cercle avec bordure — idéal pour les espaces réservés d'avatar

Icône+Texte vs Icône uniquement

Mode	URL	Effet
Icône uniquement (sans texte)	`?icon=outline/heart`	Icône agrandie et centrée automatiquement, aucun texte
Icône + Texte vide	`?icon=outline/heart&text=`	Identique au mode icône uniquement
Icône + Texte	`?icon=outline/heart&text=Love`	Icône et texte côte à côte (comportement original)
Ni icône ni texte	`600x400.png`	Texte de dimensions (comportement par défaut)

Remarques

Fonctionne avec tous les formats de sortie (SVG, PNG, JPEG, WebP, AVIF, etc.)
Tous les paramètres d'icône (iconcolor, iconcolor2, icongradient, iconsize) fonctionnent comme prévu
Tous les effets d'arrière-plan (transparent, dégradé, motif, bruit, bordure, rayon) peuvent être combinés avec le mode icône uniquement
Fonctionne aussi avec les petites tailles — parfait pour les favicons : 32x32.ico?icon=filled/star&iconcolor=FFD700

Aperçu

Le paramètre padding contrôle l'espace blanc autour du texte et des icônes. 4 formats : pixel unique, proportion unique, deux valeurs (vertical + horizontal), quatre valeurs (sens horaire CSS).

# Formats pris en charge
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

Comportement par défaut

Sans le paramètre padding, les marges par défaut sont utilisées (identique aux versions précédentes) :

Gauche et droite : 5% de la largeur Haut et bas : 20% de la hauteur

Détails des formats

20 Valeur pixel unique

Les quatre côtés utilisent la même valeur en pixels.

padding=20

1/6 Valeur proportion unique

Les quatre côtés utilisent une proportion. Haut/bas basé sur la hauteur, gauche/droite basé sur la largeur. Les résultats sont arrondis automatiquement.

padding=1/6 → 600×400 → haut/bas 67px, gauche/droite 100px

10,20 Deux valeurs (vertical + horizontal)

Contrôle séparément les marges verticales et horizontales. Pixels et proportions peuvent être mélangés.

padding=10,20 → haut/bas 10px, gauche/droite 20px
padding=1/8,15 → haut/bas = hauteur/8, gauche/droite 15px
padding=30,1/10 → haut/bas 30px, gauche/droite = largeur/10

10,20,30,40 Quatre valeurs (sens horaire CSS)

Contrôle CSS indépendant : haut, droite, bas, gauche. Haut/bas basé sur la hauteur, gauche/droite sur la largeur. Pixels et proportions mélangés possibles.

padding=10,20,30,40 → haut 10, droite 20, bas 30, gauche 40 (tout en px)
padding=1/8,1/6,15,1/10 → haut h/8, droite w/6, bas 15px, gauche w/10 (mixte)

Exemples

Texte court — Réduire les marges

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

Texte court comme "IP" avec padding=1/10 pour une mise en page plus compacte.

Aucune marge

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

Définir padding=0 pour que le contenu remplisse toute l'image.

Icône + texte — Mise en page compacte

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

Icône et texte côte à côte avec des marges modérées.

Zone de titre — Marge supérieure importante

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

Grande marge en haut pour un effet titre, bas compact.

Navigation gauche — Marge gauche importante

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

Grande marge à gauche pour accommoder une barre de navigation.

Remarques

Le numérateur et le dénominateur doivent être des nombres positifs
Les valeurs en pixels ne peuvent pas être négatives — les valeurs négatives sont corrigées à 0
Les résultats de proportion sont arrondis automatiquement à des pixels entiers
Si les marges dépassent la moitié des dimensions de l'image, la zone de contenu peut devenir très petite et la taille de police sera automatiquement réduite à 12px minimum

Fonctionnalités avancées — Débogueur interactif de l'API

Système d'icônes

Documentation et Référence

Syntaxe de base

Détails des paramètres

Exemples complets

Remarques

Conditions de déclenchement

Règles de taille de l'icône

Exemples

Icône+Texte vs Icône uniquement

Remarques

Aperçu

Comportement par défaut

Détails des formats

Exemples

Remarques