Tính năng nâng cao — Trình gỡ lỗi API tương tác

60 phông chữ đa ngôn ngữ, 5000+ biểu tượng, 9 định dạng ảnh, kết cấu gradient, tô sáng văn bản — mọi tham số đều có thể xem trước theo thời gian thực

Xem trước trực tiếp hình ảnh giữ chỗ MockImg
Cài đặt cơ bản
×
Tỷ lệ
Không khoảng đệm
Siêu gọn1/20
Gọn1/10
Vừa phải1/8
Rộng1/6
Mặc định1/5
Rất rộng1/4
Tối đa1/3
Dọc + Ngang
Văn bản ngắn1/10,1/20
Banner1/4,1/20
Trên / Phải / Dưới / Trái
Vùng tiêu đề40,10,5,10
Điều hướng trái20,10,20,60
Kiểu chữ
Tự động
Nền & Viền
100%
Tắt
85
Cài đặt biểu tượng
Tự động
Tô sáng văn bản [Xem hướng dẫn]

Hệ thống biểu tượng

5000+ Tabler Icons với phong cách Outline và Filled, có thể tùy chỉnh kích thước

Kích thước biểu tượng 48
Xem trước Tabler Icons

Tài liệu & Tham chiếu

Tham chiếu tham số API đầy đủ, hướng dẫn tô sáng văn bản, chế độ chỉ hiển thị biểu tượng

Cú pháp cơ bản

Sử dụng {{...}} trong tham số text để bọc các phần văn bản cần tô sáng. Tất cả các đoạn được tô sáng dùng chung một kiểu.Mẹo: Bạn cũng có thể nhập {{...}} trực tiếp vào ô nhập Nội dung văn bản ở trên — hệ thống sẽ tự động phát hiện và áp dụng hiệu ứng tô sáng.

# Định dạng cú pháp
?text=Văn bản thường{{văn bản đánh dấu}}văn bản thường tiếp
&hlcolor=FF5733

Chi tiết tham số

hlcolor Màu tô sáng

Đặt màu tô sáng. Hỗ trợ định dạng HEX (ví dụ: FF5733) hoặc tên màu (ví dụ: red).

Ví dụ: ?text=Mock{{Img}}.Dev&hlcolor=FF5733
hlcolor2 Màu gradient tô sáng 2

Đặt màu thứ hai cho gradient tô sáng. Đặt tham số này sẽ tự động bật hiệu ứng gradient, với hlcolor làm màu bắt đầu.

Ví dụ: ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6
hlgradient Hướng gradient tô sáng

Đặt hướng gradient. Mặc định là horizontal khi không đặt.

horizontal Ngang (trái sang phải) vertical Dọc (trên xuống dưới) diagonal Chéo (trên-trái xuống dưới-phải)
Ví dụ: ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical
hlfont Phông chữ tô sáng

Chỉ định phông chữ độc lập cho văn bản được tô sáng. Giá trị là tên tệp phông chữ (không bao gồm phần mở rộng .ttf).

Ví dụ: ?text={{Brand}}&hlfont=Poppins-Bold
hlbold In đậm tô sáng

Làm cho văn bản được tô sáng in đậm. Giá trị: true hoặc 1.

Ví dụ: ?text={{Important}}&hlbold=true

Ví dụ đầy đủ

Ví dụ 1:Tô sáng màu đặc
https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

Hiệu ứng:"MockImg.Dev" — Img hiển thị màu đỏ

Ví dụ 2:Tô sáng gradient
https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

Hiệu ứng: "Gradient" hiển thị gradient ngang từ hồng đến tím

Ví dụ 3:Tô sáng phông chữ tùy chỉnh
https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

Hiệu ứng: "MockImg" hiển thị màu xanh dương với phông Poppins-Bold

Ví dụ 4:Tô sáng in đậm
https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

Hiệu ứng: "Important" hiển thị màu đỏ in đậm

Ví dụ 5:Kết hợp (Gradient + Phông chữ + In đậm)
https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

Hiệu ứng: "Premium" hiển thị gradient chéo (vàng đến đỏ) với phông Montserrat-Bold

Ví dụ 6:Tô sáng nhiều đoạn
https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

Hiệu ứng: "MockImg" và văn bản giữ chỗ đều hiển thị màu xanh dương (chia sẻ kiểu đánh dấu)

Ví dụ 7:Tô sáng trong văn bản CJK
https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

Hiệu ứng: "MockImg" hiển thị màu xanh lá, phần còn lại dùng màu mặc định

Ví dụ 8:Chủ đề tối + Tô sáng
https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

Hiệu ứng: Trong chế độ tối, "Mode" hiển thị đánh dấu màu vàng

Lưu ý

  • Đánh dấu {{...}} không được tính trong phép tính chiều rộng văn bản và không ảnh hưởng đến bố cục
  • Không hỗ trợ đánh dấu {{...}} lồng nhau — đánh dấu bên trong được coi là văn bản thuần túy
  • Tất cả các đoạn được tô sáng dùng chung cài đặt kiểu hl*
  • Tính năng tô sáng hoạt động với mọi định dạng đầu ra (SVG, PNG, JPEG, WebP, AVIF, v.v.)
  • Đánh dấu tô sáng cũng hoạt động trong văn bản nhiều dòng (sử dụng \n để xuống dòng)

Điều kiện kích hoạt

  • Đã cung cấp tham số icon
  • Không có tham số text, hoặc text để trống

Quy tắc kích thước biểu tượng

Tự động: kích thước biểu tượng = 80% chiều nhỏ hơn của hình ảnh (tối thiểu 24px, tối đa 90%)

Tùy chỉnh: sử dụng tham số iconsize để ghi đè tính toán tự động

Ví dụ

Biểu tượng màu đặc
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733

Hiệu ứng: Biểu tượng trái tim tự động phóng to và căn giữa màu đỏ

Biểu tượng gradient
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal

Hiệu ứng: Biểu tượng ngôi sao với gradient chéo từ vàng sang đỏ

Trong suốt + Biểu tượng
https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

Hiệu ứng: Biểu tượng người dùng trên nền trong suốt — hoàn hảo cho avatar

Nền gradient + Bo góc
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

Hiệu ứng: Biểu tượng trái tim trắng trên nền gradient hồng với góc bo tròn

Chủ đề tối + Biểu tượng
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

Hiệu ứng: Biểu tượng ngôi sao vàng trên nền tối

Viền hình tròn (Avatar)
https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

Hiệu ứng: Biểu tượng người dùng trong hình tròn có viền — lý tưởng cho ảnh giữ chỗ avatar

Biểu tượng+Văn bản so với Chỉ biểu tượng

Chế độ URL Hiệu ứng
Chỉ biểu tượng (không văn bản) ?icon=outline/heart Biểu tượng tự động phóng to và căn giữa, không có văn bản
Biểu tượng + Văn bản trống ?icon=outline/heart&text= Giống như chế độ chỉ biểu tượng
Biểu tượng + Văn bản ?icon=outline/heart&text=Love Biểu tượng và văn bản cạnh nhau (hành vi gốc)
Không biểu tượng không văn bản 600x400.png Văn bản kích thước (hành vi mặc định)

Lưu ý

  • Hoạt động với mọi định dạng đầu ra (SVG, PNG, JPEG, WebP, AVIF, v.v.)
  • Tất cả tham số biểu tượng (iconcolor, iconcolor2, icongradient, iconsize) hoạt động bình thường
  • Tất cả hiệu ứng nền (trong suốt, gradient, hoa văn, nhiễu, viền, bo góc) có thể kết hợp với chế độ chỉ biểu tượng
  • Hoạt động với kích thước nhỏ — hoàn hảo cho favicon: 32x32.ico?icon=filled/star&iconcolor=FFD700

Tổng quan

Tham số padding điều khiển khoảng trắng quanh văn bản và biểu tượng. Hỗ trợ 4 định dạng: pixel đơn, tỷ lệ đơn, hai giá trị (dọc + ngang), bốn giá trị (CSS theo chiều kim đồng hồ).

# Các định dạng được hỗ trợ
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

Hành vi mặc định

Khi không truyền padding, giá trị mặc định được sử dụng (giống phiên bản trước):

Trái và phải: 5% chiều rộng Trên và dưới: 20% chiều cao

Chi tiết định dạng

20 Giá trị pixel đơn

Bốn cạnh sử dụng cùng giá trị pixel.

padding=20
1/6 Giá trị tỷ lệ đơn

Bốn cạnh sử dụng tỷ lệ. Trên/dựa trên chiều cao, trái/phải dựa trên chiều rộng. Kết quả tự động làm tròn.

padding=1/6  →  600×400 → trên/dưới 67px, trái/phải 100px
10,20 Hai giá trị (dọc + ngang)

Điều khiển khoảng đệm dọc và ngang riêng biệt. Có thể kết hợp pixel và tỷ lệ.

padding=10,20  →  trên/dưới 10px, trái/phải 20px
padding=1/8,15  →  trên/dưới = chiều cao/8, trái/phải 15px
padding=30,1/10  →  trên/dưới 30px, trái/phải = chiều rộng/10
10,20,30,40 Bốn giá trị (CSS theo chiều kim đồng hồ)

Điều khiển CSS độc lập: trên, phải, dưới, trái. Trên/dựa trên chiều cao, trái/phải trên chiều rộng. Kết hợp pixel và tỷ lệ được.

padding=10,20,30,40  →  trên 10, phải 20, dưới 30, trái 40 (tất cả px)
padding=1/8,1/6,15,1/10  →  trên h/8, phải w/6, dưới 15px, trái w/10 (kết hợp)

Ví dụ

Văn bản ngắn — Giảm khoảng đệm
https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

Văn bản ngắn như "IP" dùng padding=1/10 cho bố cục gọn hơn.

Không khoảng đệm
https://mockimg.dev/600x400.svg?text=Full&padding=0

Đặt padding=0 để nội dung lấp đầy toàn bộ hình ảnh.

Biểu tượng + văn bản — Bố cục gọn
https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

Biểu tượng và văn bản cạnh nhau với khoảng đệm vừa phải.

Vùng tiêu đề — Khoảng đệm trên lớn
https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

Khoảng đệm trên lớn tạo cảm giác tiêu đề, dưới nhỏ gọn.

Điều hướng trái — Khoảng đệm trái lớn
https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

Khoảng đệm trái lớn để phù hợp thanh điều hướng.

Lưu ý

  • Tử số và mẫu số trong giá trị tỷ lệ phải là số dương
  • Giá trị pixel không thể âm — giá trị âm tự động sửa thành 0
  • Kết quả tỷ lệ tự động làm tròn thành pixel nguyên
  • Nếu khoảng đệm vượt quá nửa kích thước hình ảnh, vùng nội dung có thể rất nhỏ và cỡ chữ tự động giảm tối thiểu 12px