CHAPTER 05 · PRACTICE WORKSPACE

Hero、背景、遮罩與偽元素

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

03 Checkpoint 2 2/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-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：加入深色遮罩

修改：style.css

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

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

遮罩 vs 文字色｜背景圖像上的可讀性

比較：深色遮罩改變背景與文字的對比環境，單改文字色不一定能處理背景圖像明暗變化。

現在做：在 DevTools 先將 .practice-hero::before 的背景色設為 rgba(8, 30, 22, .62)，觀察亮窗區的白字對比；清除遮罩後只把 h1 顏色改成較深色比較，最後恢復白字並把遮罩寫回 style.css。

看預期與證據

預期：能分辨遮罩改變整個背景與文字的對比環境、文字色只改變文字本身，並知道背景圖像明暗變化應優先處理遮罩。

證據：前後截圖或口述比較遮罩與文字色兩個狀態，並展示 ::before 的背景色與透明度宣告。

::before vs 真實內容｜裝飾不能承載資訊

比較：偽元素適合裝飾遮罩，標題與連結仍應保留在 HTML 真實內容中。

現在做：在 Elements 暫時停用 .practice-hero::before，確認標題與 CTA 仍存在；再只替 ::before 加背景色，檢查遮罩是裝飾層而非文字內容，最後保留 HTML 中的 h1 與 a。

看預期與證據

預期：能指出停用偽元素時真實標題與 CTA 仍可讀，並說明 ::before 只負責裝飾遮罩，不能承載訪客需要閱讀或點擊的資訊。

證據：截圖或口述同時指出 Elements 裡的真實 h1／a 與 ::before，並說明兩者責任不同。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 2 以亮部背景圖像位置查看白色標題，確認背景與置中已完成但 ::before 尚無深色透明遮罩。
  2. B｜預測：重新整理後比較背景圖像與白色標題，確認文字不會被亮部吃掉。
  3. C｜實作：在 style.css 的 .practice-hero::before 完成「加入深色遮罩」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 .practice-hero::before 與 style.css，最後重跑原操作。
  5. E｜驗收：白色標題在背景圖像上清楚可讀

完成條件：DONE-03：白色標題在背景圖像上清楚可讀

PORTFOLIO 2026

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

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

查看精選作品

CONTINUE

繼續完成 TASK-03

前往 Solution，依要求完成「加入深色遮罩」。

前往 Solution：完成 TASK-03