圖片或影片沒有顯示時的檢查方式 – ZenBlocks buttonBasic
結論
圖片或影片不顯示,通常是 **媒體未設定、路徑錯誤、overlay 太不透明,或尺寸/位置設定不正確**。
> **重點:** 請先依「媒體設定 -> 覆蓋層 -> 尺寸與位置」順序排查。
> **影響:** 可避免同時改動多項設定造成誤判。
> **調整建議:** 每一步只改一項,確認後再進入下一步。—
原因
1. 媒體未設定。
2. 檔案被移動或刪除。
3. overlay 的 alpha 過高(如 1.0)。
4. 大小或位置參數錯誤。
5. 在顯示設定中被隱藏。—
解決步驟
### 步驟 1:確認媒體設定
背景媒體:
1. 開啟背景設定。
2. 檢查圖片/影片 URL。
3. 確認媒體庫中檔案仍存在。縮圖:
1. 開啟縮圖設定。
2. 檢查是否已選圖,且顯示切換為啟用。### 步驟 2:確認 overlay
1. 開啟 overlay 設定區塊。
2. 檢查 alpha 值。
3. alpha = 1.0 會完全蓋住背景媒體。### 步驟 3:確認大小與位置
1. 檢查 `Background 尺寸`。
2. 檢查 `Background 位置`。
3. 避免 custom 設定為 `0px` / `0%`。### 步驟 4:確認瀏覽器與快取
1. 開 DevTools(F12)看 Network。
2. 檢查媒體請求是否有 404。
3. 清除快取後再測試。—
注意事項
– 縮圖與背景是獨立設定。
– 手機背景影片仍受 autoplay 限制影響。—
相關設定
– [背景設定](../button/background/)
– [縮圖設定](../button/thumbnail/)
– [樣式設定](../button/style/)