Documentación y Referencia

Referencia completa de parámetros API, guía de resaltado de texto, modo de solo iconos

Sintaxis basica

hl_syntax_desc

# Formato de sintaxis
?text=Texto normal{{texto resaltado}}más texto normal
&hlcolor=FF5733

Detalles de los parametros

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 (izquierda a derecha) vertical Vertical (arriba a abajo) diagonal Diagonal (arriba-izquierda a abajo-derecha)

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

Ejemplos completos

hl_example_prefix 1：hl_ex1_title

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

hl_effect_prefix"MockImg.Dev" — Img se muestra en rojo

hl_example_prefix 2：hl_ex2_title

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

Efecto: "Gradient" se muestra con degradado horizontal de rosa a púrpura

hl_example_prefix 3：hl_ex3_title

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

Efecto: "MockImg" se muestra en azul con fuente Poppins-Bold

hl_example_prefix 4：hl_ex4_title

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

Efecto: "Important" se muestra en rojo y negrita

hl_example_prefix 5：hl_ex5_title

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

Efecto: "Premium" se muestra con degradado diagonal (dorado a rojo) en fuente Montserrat-Bold

hl_example_prefix 6：hl_ex6_title

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

Efecto: "MockImg" y el texto de marcador se muestran en azul (estilo de resaltado compartido)

hl_example_prefix 7：hl_ex7_title

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

Efecto: "MockImg" se muestra en verde, el resto usa el color predeterminado

hl_example_prefix 8：hl_ex8_title

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

Efecto: En tema oscuro, "Mode" se muestra con resaltado dorado

Notas

hl_note_1
hl_note_2
hl_note_3
hl_note_4
hl_note_5

Condiciones de activación

Parámetro icon proporcionado
Sin parámetro text, o text vacío

Reglas de tamaño del icono

Automático: tamaño del icono = 80% de la dimensión menor de la imagen (mínimo 24px, máximo 90%)

Personalizado: usar el parámetro iconsize para sobrescribir el cálculo automático

Ejemplos

Icono de color sólido

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

Efecto: icono de corazón ampliado y centrado automáticamente en rojo

Icono con degradado

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

Efecto: icono de estrella con degradado diagonal de dorado a rojo

Transparente + Icono

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

Efecto: icono de usuario sobre fondo transparente — perfecto para avatares

Fondo degradado + Redondeado

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

Efecto: icono de corazón blanco sobre degradado rosa con bordes redondeados

Tema oscuro + Icono

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

Efecto: icono de estrella dorado sobre fondo oscuro

Borde circular (Avatar)

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

Efecto: icono de usuario en círculo con borde — ideal para marcadores de posición de avatar

Icono+Texto vs Solo Icono

Modo	URL	Efecto
Solo icono (sin texto)	`?icon=outline/heart`	Icono ampliado y centrado automáticamente, sin texto
Icono + Texto vacío	`?icon=outline/heart&text=`	Igual que solo icono
Icono + Texto	`?icon=outline/heart&text=Love`	Icono y texto uno al lado del otro (comportamiento original)
Sin icono ni texto	`600x400.png`	Texto de dimensiones (comportamiento predeterminado)

Notas

Funciona con todos los formatos de salida (SVG, PNG, JPEG, WebP, AVIF, etc.)
Todos los parámetros de icono (iconcolor, iconcolor2, icongradient, iconsize) funcionan como se espera
Todos los efectos de fondo (transparente, degradado, patrón, ruido, borde, radio) se pueden combinar con el modo solo icono
También funciona con tamaños pequeños — perfecto para favicons: 32x32.ico?icon=filled/star&iconcolor=FFD700

Descripción general

El parámetro padding controla el espacio en blanco alrededor del texto e íconos. Soporta 4 formatos: valor único en px, proporción única, dos valores (vertical + horizontal) y cuatro valores (sentido horario CSS).

# Formatos soportados
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

Comportamiento predeterminado

Si no se proporciona padding, se usan los valores predeterminados (igual que versiones anteriores):

Izquierda y derecha: 5% del ancho Arriba y abajo: 20% de la altura

Detalles de formato

20 Valor único en píxeles

Las cuatro esquinas usan el mismo valor en píxeles.

padding=20

1/6 Valor único en proporción

Las cuatro esquinas usan una proporción. Arriba/abajo basado en la altura, izquierda/derecha basado en el ancho. Los resultados se redondean automáticamente.

padding=1/6 → 600×400 → arriba/abajo 67px, izquierda/derecha 100px

10,20 Dos valores (vertical + horizontal)

Controla el relleno vertical y horizontal por separado. Se pueden mezclar píxeles y proporciones.

padding=10,20 → arriba/abajo 10px, izquierda/derecha 20px
padding=1/8,15 → arriba/abajo = altura/8, izquierda/derecha 15px
padding=30,1/10 → arriba/abajo 30px, izquierda/derecha = ancho/10

10,20,30,40 Cuatro valores (sentido horario CSS)

Control CSS independiente: superior, derecha, inferior, izquierda. Arriba/abajo basado en altura, izquierda/derecha en ancho. Píxeles y proporciones se pueden mezclar.

padding=10,20,30,40 → superior 10, derecha 20, inferior 30, izquierda 40 (todo px)
padding=1/8,1/6,15,1/10 → superior h/8, derecha w/6, inferior 15px, izquierda w/10 (mixto)

Ejemplos

Texto corto — Reducir espacio

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

Texto corto como "IP" con padding=1/10 para un diseño más compacto.

Sin relleno

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

Establecer padding=0 para llenar toda la imagen con contenido.

Ícono + texto — Diseño compacto

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

Ícono y texto lado a lado con relleno moderado.

Área de título — Asimétrico superior

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

Relleno superior grande para crear sensación de título, inferior compacto.

Navegación izquierda — Asimétrico izquierdo

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

Relleno izquierdo grande para acomodar una barra de navegación.

Notas

El numerador y denominador en valores de proporción deben ser positivos
Los valores en píxeles no pueden ser negativos — los negativos se corrigen automáticamente a 0
Los resultados de proporción se redondean automáticamente a píxeles enteros
Si el relleno excede la mitad de las dimensiones de la imagen, el área de contenido puede volverse muy pequeña y el tamaño de fuente se reducirá automáticamente a un mínimo de 12px

Funciones avanzadas: depurador interactivo de API

Sistema de iconos

Documentación y Referencia

Sintaxis basica

Detalles de los parametros

Ejemplos completos

Notas

Condiciones de activación

Reglas de tamaño del icono

Ejemplos

Icono+Texto vs Solo Icono

Notas

Descripción general

Comportamiento predeterminado

Detalles de formato

Ejemplos

Notas