CHAPTER 05 · PRACTICE WORKSPACE

Hero、背景、遮罩與偽元素

完成文字清楚可讀且 CTA 能抵達真實內容的首頁 Hero

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

設定 Hero 背景圖

修改檔案：style.css

完成後看見：首頁頂端出現完整背景圖像

TASK-02稍後處理

設定 Hero 對齊並連結真實 CTA 目標

修改檔案：style.css、index.html

完成後看見：內容置中不貼邊，CTA 可抵達精選作品區

TASK-03稍後處理

加入深色遮罩

修改檔案：style.css

完成後看見：白色標題在背景圖像上清楚可讀

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：設定 Hero 背景圖

修改：style.css

完成後：首頁頂端出現完整背景圖像

講解時展開：2 個小型比較

cover vs contain｜背景要填滿還是完整

比較：cover 會填滿舞台但可能裁切，contain 會保留完整內容但可能留下空間；要依 Hero 目的選擇。

現在做：在 DevTools 將 .practice-hero 的 background-size 從 cover 改成 contain，記錄背景四周出現的空間；再改回 cover，確認 images/hero-workspace.svg 填滿 Hero，最後把 cover 寫回 style.css。

看預期與證據

預期：能分辨 cover 會填滿舞台但可能裁切、contain 會保留完整內容但可能留下空間，並能說明本章 Hero 應選 cover 的原因。

證據：前後截圖或口述同時指出 cover 與 contain 的畫面差異，並展示 style.css 的 background-size: cover。

background-position vs background-size｜裁切位置與填滿方式

比較：position 決定焦點落在哪裡，size 決定圖片怎麼填滿，兩者控制不同問題。

現在做：在 DevTools 保留 background-size: cover，只把 background-position 從 center 改成 left 與 right，觀察窗光和桌面焦點如何移動；復原 center 後說明 position 與 size 分別控制什麼。

看預期與證據

預期：能看到焦點位置改變但填滿方式不變，並能分辨 background-position 負責裁切焦點、background-size 負責填滿方式。

證據：用三個 position 狀態的截圖或口述比較焦點位置，並指出 background-size 未被改動。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 查看 Hero 目前只有 #456 純色背景，先確認 images/hero-workspace.svg 與 style.css 位於可解析的相對路徑。
  2. B｜預測：重新整理後查看頁面頂端，確認背景圖像完整覆蓋 Hero。
  3. C｜實作：在 style.css 的 .practice-hero 完成「設定 Hero 背景圖」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 .practice-hero 與 style.css，最後重跑原操作。
  5. E｜驗收：首頁頂端出現完整背景圖像

完成條件：DONE-01：首頁頂端出現完整背景圖像

PORTFOLIO 2026

把複雜問題，整理成清楚的網頁

我是小安，正在學習前端開發。

前往精選作品（待設定）

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「設定 Hero 背景圖」。

前往 Checkpoint 1：完成 TASK-01