縮圖與背景的差異與選用 – ZenBlocks buttonBasic
結論
**縮圖** 是按鈕內的獨立圖片；**背景** 是按鈕整體的底層視覺。
—
差異比較
| 比較項目 | 縮圖 | 背景 |
|—|—|—|
| 位置 | 按鈕內部 | 按鈕整體背景 |
| 與文字關係 | 並排或上下配置 | 文字覆蓋其上 |
| 尺寸控制 | `寬度` / `高度` | `Background 尺寸` |
| Hover | 可改尺寸/位置 | 透過 overlay/顏色變化 |
| 影片支援 | 否 | 是 |
| overlay | 否 | 是 |
| 圓角 | 可獨立設定 | 通常跟隨按鈕 |
| 響應式 | 可分裝置調整 | 可分裝置調整 |—
選擇建議
### 適合用縮圖的情況
1. 要展示產品或 Logo 主視覺。
2. 要做文字 + 圖片的組合排版。
3. 圖片需要獨立樣式（邊框、圓角）。
4. 需要 Hover 放大圖片效果。### 適合用背景的情況
1. 想建立按鈕整體氛圍。
2. 文字要放在照片上並搭配 overlay。
3. 需要背景影片。
4. 需要 `預設/Hover` 不同背景。### 兩者同時使用
– 背景做氛圍。
– 縮圖放重點視覺。
– CTA 文字負責行動引導。—
注意事項
– 縮圖使用 `object-fit`，可能因比例而被裁切。
– overlay 太不透明會遮住背景。
– 背景 + 縮圖都用大圖會影響效能。—
相關設定
– [縮圖設定](../button/thumbnail/)
– [背景設定](../button/background/)
– [版面配置設定](../button/layout/)