痛點：高清大圖背景下文字難識別

現代網頁設計大量使用全屏大圖，文字若直接鋪在複雜背景上極易「隱形」。五大技法讓文字**第一眼可讀、視覺層次分明**。

技法一：色塊疊加增強對比

1. 新建圖層「顏色疊加」，吸管取圖中主色（如藍襯衫），Shift+F5 填充。
2. 不透明度 **50%**，圖層置於**文字圖層下方**。
3. 文字瞬間脫離雜亂背景，對比度大幅提升。

技法二：投影/陰影立體脫離

1. 文字顏色設 **白色**（或高亮色），與暗部背景形成本質對比。
2. 圖層樣式 → **投影**：不透明度 52%、角度 -144°、距離 0、擴展 16%、大小 100 px。
3. 文字右下方形成柔和陰影，**視覺上「浮起」於背景之上**。

技法三：雙橫線分隔區隔

1. 文字上下各加一條 **白色橫線**（形狀工具/畫筆/邊框）。
2. 線條粗細 2-4 px，與文字上下邊距 1.5-2 倍行高。
3. 形成**視覺「軌道」**，文字被嵌入其中，極強識別度。

技法四：局部半透明色塊背景

1. 矩形工具繪製矩形覆蓋文字區域，填充 **黑色**，描邊 **白色 3px**。
2. 圖層置於文字下方，不透明度 **57%**。
3. 文字在半透明色塊上**清晰可讀**，同時保留背景圖整體性。

技法五：背景虛化（景深模擬）

1. 背景圖層右鍵 → **轉換為智慧對象**（保護原始畫質）。
2. 濾鏡 → 模糊 → **高斯模糊**，半徑 **3-5 px**（視解析度）。
3. 文字層保持銳利，**景深效果**讓文字成焦點，背景退居襯托。

五大技法選擇指南

背景特徵	推薦技法	優勢	注意
色彩繁雜、細節多	色塊疊加 / 半透明色塊	強制建立乾淨背景區	色塊顏色需從圖中取樣協調
文字落在暗部/陰影區	白字 + 投影	本質對比+立體感	投影參數需視光源方向調整
極簡構圖/極寬版面	雙橫線分隔	構圖感強、編輯靈活	線條顏色/粗細需統一設計語言
需保留背景完整性	背景虛化 (智慧物件)	非破壞、畫質無損	模糊半徑勿過大失識別度
綜合場景	組合使用	層層疊加保險	圖層結構管理要清晰

響應式設計落地建議

• **CSS 實現**：`background: rgba(0,0,0,0.5);` 半透明色塊；`text-shadow: 0 4px 20px rgba(0,0,0,0.5);` 投影；`backdrop-filter: blur(4px);` 背景虛化（現代瀏覽器支援）。
• **斷點測試**：手機豎屏/橫屏、平板、桌面，確保文字最小可讀尺寸（≥14px）與對比度（WCAG AA 4.5:1）。
• **設計系統化**：將五大技法封裝為設計組件，統一參數標準，團隊協作零溝通成本。