背景設定

覆蓋層

重點：
覆蓋層是直接提升文字可讀性的第一調整點。

影響：
能快速平衡背景明暗差，避免文案被圖片細節吃掉。

調整建議：
先用單色決定濃度，再視需求改成漸層。

設定項目

• 顏色 / Gradient
• 不透明度
• 混合模式
• 重設
• 響應式

註解：
覆蓋層位於背景上層，會直接影響文字與背景的對比。

操作提示：
若主文案仍不清楚，先提高覆蓋層不透明度，再微調文字顏色。

圖案

重點：
圖案用於增加質感，避免背景過於單調。

影響：
可提升視覺層次，但過強會干擾主文案。

調整建議：
先降低圖案不透明度，再微調尺寸與混合模式。

設定項目

• 圖案類型
• 圖案顏色
• 圖案尺寸
• 圖案不透明度
• 混合模式
• 響應式

註解：
建議與背景色一併調整，避免圖案對比過高。

操作提示：
圖案主要用於氣氛營造，請避免把圖案當成主視覺焦點。

影像

重點：
影像設定決定背景素材如何填滿按鈕區域。

影響：
同一素材在 Fit 與位置不同時，視覺訴求會明顯改變。

調整建議：
先決定 Fit，再調整位置，最後再處理透明度與覆蓋層。

設定項目

• 媒體類型（圖片 / 影片）
• 圖片：重複、適合方式、旋轉 (deg)、不透明度
• 影片：Video URL、套用
• 影片顯示：Video Fit、Video 位置 X/Y
• 海報：Poster URL、移除 Poster、Poster Fit、Poster 位置 X/Y
• 響應式

圖片選擇 UI（Image）

• MEDIA TYPE = Image 時，可使用媒體庫、搜尋或 URL 指定。
• 來源分頁為 媒體庫 / Search / 圖片選擇 / 圖片 URL。
• 不同來源最終都會套用到同一背景影像層。

Image: Search

• 可用供應商為 Openverse / Unsplash / Pexels / Pixabay，搭配搜尋欄位篩選。
• Openverse 可免 API Key 使用；Unsplash / Pexels / Pixabay 需完成搜尋 API 設定（API Key 等），未設定時無法取得結果。
• 可用關鍵字標籤（例如：商務 / 人物 / 自然）快速查找。
• 使用前請確認各服務的授權與使用條款。

Image: 媒體庫

• 可用預設分類（例如：全部 / 自然 / 生活風格 / 食物）快速篩選。
• 從清單選取後，會直接套用到背景影像層。
• 建議先優化圖片尺寸後再使用，以降低載入成本。

Image: 圖片 URL

• 在圖片 URL 欄位輸入 https://...，按套用後即會反映。
• 404 或 CORS 限制的 URL 不會顯示。
• URL 直連在搬站或 CDN 切換時可能失效，建議定期檢查。

Video 選擇 UI（Video）

• MEDIA TYPE = Video 時，可設定影片 URL 與海報圖（Poster）。
• 若要使用影片搜尋，也需要對應供應商的 API 設定（API Key 等）；未設定時搜尋結果不會顯示。
• Video Fit 與 Video 位置 X/Y 可調整影片裁切與構圖位置。
• Poster 為影片未播放時的替代圖，行動裝置上特別重要。

PRO 功能：
背景影片（Video URL / Video Fit / Poster）為 ZenBlocks PRO 功能。

操作提示：
影片素材建議先壓縮容量，再上傳可降低首屏負擔。

註解：
背景圖層順序（由下到上）為「顏色 → 影像 → 圖案 → 覆蓋層」。各層以 z-index 管理，並套用 pointer-events: none 以避免遮擋點擊。

操作提示：
Hover 狀態可個別設定背景影像，建議與一般狀態一併確認可讀性。

影片背景限制：
在 iOS / Android 上，瀏覽器通常只允許「靜音」影片自動播放。即使區塊已自動附加 muted / playsinline / loop / autoplay，仍可能因裝置或瀏覽器策略被阻擋。強烈建議設定 Poster。支援來源：YouTube（youtube-nocookie.com）、Vimeo、直接檔案 URL（MP4 等）。

圖片/影片互斥：
當媒體類型切換為「影片」時，背景圖片層會被隱藏（display: none），圖片與影片不會同時顯示。

顏色

重點：
顏色是背景層的基底，會影響全部上層元素的觀感。

影響：
與覆蓋層、圖案、文字色組合後，決定最終可讀性。

調整建議：
先確認文字對比，再做漸層與透明度微調。

設定項目

• 顏色 / Gradient
• Alpha
• 漸層切換
• 重設
• 響應式

註解：
背景色在最下層，建議搭配上層元素整體檢查。

操作提示：
先在一般狀態定色，再確認 hover 狀態是否仍可讀。

註解：
使用漸層可增加色彩層次與空間感。背景色作為最底層，請與覆蓋層 / 圖案 / 影像一起檢查整體平衡。

Hover 顏色轉場：
背景顏色在 Hover 時採交叉淡化（crossfade）機制切換，因此「一般＝單色、Hover＝漸層」（或反向）也能平滑轉換。

轉場

重點：
背景轉場控制一般狀態到懸停狀態的變化節奏。

影響：
過快不易感知、過慢則降低操作回饋。

調整建議：
先以 200-350ms 作為基準，再微調 Delay 與 Easing。

設定項目

• 持續時間 (ms)
• 延遲時間 (ms)
• 緩動
• 自訂值
• 重設

註解：
此區只影響背景相關層，不會覆蓋文字或圖示動畫設定。

操作提示：
若互動感過強，優先縮短 Delay，再調整 Easing。

註解：
此背景轉場會同時套用在覆蓋層 / 圖案 / 影像 / 顏色的 Hover 變化上，並且與樣式設定的轉場相互獨立。