視覺樣式詞條 3-32

透明度Opacity

也常叫做：透明度、不透明度、Opacity

你可能會這樣說

大圖上放文字總是讀不清楚，想讓圖片退後一點當背景，但又不想整張換掉，直接調淡又連文字一起糊掉。

透明度是元素的穿透程度：100% 全實、0% 全消失。它最常見的三個任務：圖片退後（降到 20% 到 40% 當背景）、次要資訊淡化（佔位文字、停用狀態）、淡入淡出動畫。

最大的坑是它會連小孩一起變淡：圖片上如果有文字，直接調圖片的透明度會連字一起糊掉。正解是在圖上疊一層半透明遮罩，文字放在遮罩之上。

跟 AI 說「背景壓暗、文字保持全白」，它就會用遮罩而不是硬調透明度。

落日與海

文字透明度深色遮罩濃度

圖太花就把遮罩拉深，而不是把文字調淡——文字的透明度永遠保持 1，這是新手最常反過來做的調整。

圖 3-32　把文字調淡是錯的、把遮罩加深是對的——親手拉一次就懂。

中文就可以

首屏那張大圖的文字不清楚，請這樣處理：
圖上疊深色遮罩，而不是直接調圖片透明度；文字維持 100% 不透明。
遮罩用垂直漸層、下深上淺，整體透明度 55% 左右再微調。
次要說明文字可以降到 70%，主要文字保持全白。
停用狀態的按鈕整組降到 50% 並且不能點。