建立背景舞台
讓照片完整覆蓋 Hero，而不是平鋪或沒有高度。
CHAPTER 05 · 150 MINUTES
背景負責氣氛，遮罩負責讓文字被看見
完成具有背景照片、足夠高度、置中內容與深色遮罩的首頁 Hero，並能說明每一層的責任。
3個明確任務
2個接回點
3個視覺層次
LEARNING GOALS
本章結束時，你能做出什麼
安排內容位置
讓標題位於視覺中心，保留適當內距。
提升文字可讀性
用遮罩處理明暗複雜的照片，不靠換圖逃避問題。
PROBLEM & ANALOGY
照片很漂亮，為什麼標題反而看不清楚？
Hero 像舞台：背景照片是布景、標題是主角、遮罩是燈光控制。布景不能搶走訊息，燈光也不能蓋住主角。
本章要解決：背景載入卻沒有可見高度、人物被錯誤裁切、白字在明亮區域消失，以及遮罩蓋住文字。
接住上一章：把卡片的內容、邊界與空間觀念，放大到首頁第一眼的舞台。
把名詞對回畫面與程式
- Hero
- 首頁第一眼的舞台，承擔主題、背景與主要行動。
- background-image
- 把圖片放在背景層，不會變成內容中的 img。
- height
- 讓背景有可見舞台高度；沒有高度就沒有結果。
- 遮罩
- 放在背景與文字之間控制對比，不能蓋住文字或按鈕。
- CTA
- 引導下一步的主要按鈕，這章必須連到真實區塊。
SCOPE
今天的學習邊界
能自己完成
background-image、Hero
高度、內容對齊和遮罩的可讀性目的。
看得懂即可
能在畫面辨認背景、遮罩、文字三層；偽元素定位骨架由教材提供。
刻意延後
不推導定位參考點與 z-index；這些機制統一留到第 08 章。
CORE IDEAS
三個核心觀念
- 背景圖要搭配可見高度、cover 與合適 position，才能形成完整舞台。
- 遮罩是獨立視覺層；本章先辨認三層責任，不拆解定位與堆疊語法。
- 可讀性要在照片最亮與最暗區域都測試，不能只問「好不好看」。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把遮罩調得太淡或太深，並移除 Hero 高度，觀察文字對比不足與背景消失的症狀。
- 確認背景 URL 真的載入。
- 檢查 Hero 是否有可見高度。
- 確認教材提供的遮罩層仍存在，不在本章改寫定位規則。
- 調整透明度與 background-position，並在第 08 章再解釋三層如何堆疊。
背景完全不見
先查：先查圖片 URL 與 Hero 高度，再查 background-size。
標題看不清楚
先查：先看照片最亮區域，再調整遮罩透明度；不要只換成純黑背景。
按鈕看得到但點不到
先查：確認遮罩沒有覆蓋內容，並檢查 CTA href 是否指向精選作品區。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我知道這章只處理背景、對齊、遮罩與 CTA。
- 我先確認 Hero 有高度，再判斷照片是否載入。
- 我會同時測試寬視窗與窄視窗。
- 我知道背景、遮罩、文字與 CTA 是四個不同責任。
設定 Hero 背景圖
檔案：style.css
位置：.practice-hero
結果：首頁頂端出現完整背景照片
設定 Hero 對齊並連結真實 CTA 目標
檔案：style.css、index.html
位置：.practice-hero、.practice-cta、#featured-work
結果：內容置中不貼邊，CTA 可抵達精選作品區
加入深色遮罩
檔案：style.css
位置：.practice-hero::before
結果：白色標題在照片上清楚可讀
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
Hero 的背景來自 ______；我用 ______ 保持文字可讀，CTA 由 ______ 連到 ______。
不要用換掉照片或把畫面變全黑來掩蓋對比問題；需留下可讀性和真實連結證據。
提交正常寬度與窄視窗兩張截圖，指出背景、遮罩和文字各自負責什麼。
下一章：用 Flex 安排導覽列、品牌選單與介紹區兩欄。