佔位圖產生器
為原型與線框圖產生佔位圖片。
設定圖片尺寸、背景/文字顏色與文字，即可取得可直接存取的圖片 URL。
寬度
高度
預設
背景顏色
文字顏色
格式
| 格式 | 400 × 300px (PNG) |
|---|---|
| 圖片 URL | https://img.skin/400x300 |
| HTML | <img src="https://img.skin/400x300" alt="400×300" width="400" height="300"> |
| CSS | background-image: url("https://img.skin/400x300"); |
- 安全
- 只有知道圖片 URL 的使用者才能檢視。
說明
變數標籤
你可以在文字中使用自訂變數標籤。
它們可嵌入圖片尺寸、顏色、換行等資訊。
| 標籤 | 說明 | 範例 | 結果 |
|---|---|---|---|
{width} | 替換為產生圖片的寬度。 | {width}px | 400px |
{height} | 替換為產生圖片的高度。 | {height}px | 300px |
{ratio} | 替換為產生圖片的寬高比。 | {ratio} | 4:3 |
{back} | 替換為產生的背景顏色。 | 背景: {back} | 背景: #dddddd |
{color} | 替換為產生的文字顏色。 | 文字顏色: {color} | 文字顏色: #979797 |
{fmt} | 替換為產生的圖片格式。 | 格式: {fmt} | 格式: PNG |
{br} | 在該位置插入換行。 如果你在本工具表單中輸入換行，會自動插入。 | 你好{br}世界 | 你好 世界 |
圖片 URL 結構
本工具產生的圖片 URL 可作為直連使用。
若要直接請求圖片，請使用以下路徑。
- 圖片 URL
- https://img.skin/
寬度x高度/背景顏色/文字顏色
?text=文字&fmt=圖片格式
| 值 | 說明 | 範例 | 可省略 |
|---|---|---|---|
| 寬度 | 1–5000 | 400 | 否 |
| 高度 | 1–5000 | 300 | 否 |
| 背景顏色 | 十六進位色碼 / 色名 / transparent | ff1493 / deeppink | 是 *1 |
| 文字顏色 | 十六進位色碼 / 色名 / transparent | fff / white | 是 |
| 文字 | 任意文字 / 變數標籤 省略時為 '{width}×{height}'。 | W:{width}px | 是 |
| 圖片格式 | png / jpg / gif 省略時使用 PNG。JPG 與 GIF 不能使用透明背景。 | jpg | 是 |
*1 指定文字顏色（fontColor）時不可省略。