圖片看起來變暗，不一定是原圖：先檢查偽元素遮罩

整理日期：2026-08-21

狀況

某個作品分類頁的卡片圖片看起來比原圖暗。後台媒體庫與圖片網址都正常，畫面上也沒有很明顯的黑色區塊。

這種狀況不要先急著重傳圖片。原圖沒有問題時，變暗通常發生在前台樣式。

先拆成幾層看

圖片元素有沒有設定 opacity 或 filter: brightness()。
圖片外層容器有沒有半透明背景。
容器的 ::before 或 ::after 是否覆蓋在圖片上方。

開發者工具如果只選到 img，很容易漏掉最後一層。

最後發現

圖片本身沒有透明度或亮度設定。真正讓畫面變暗的是卡片容器的 ::after：頂端只有約 2% 的黑色，往下逐漸加深，底部到 26%。

.project-card-image::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.02) 0%,
    rgba(0, 0, 0, 0.26) 100%
  );
  content: "";
  inset: 0;
  position: absolute;
}

這類遮罩常用來增加白色文字的對比。卡片沒有把文字壓在圖片上時，它只會讓照片失去原本的亮度。

修正方式

先確認遮罩是否還有用途。沒有文字需要增加對比時，可以直接關掉：

.project-card-image::after {
  content: none;
}

仍需要遮罩時，不必整段移除，可以先降低底部的黑色比例：

.project-card-image::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

不要只改 img 的亮度去抵銷遮罩。那會讓圖片本身過亮，之後一移除遮罩又要重調一次。

不建議先做的事

不要先重新壓縮或重傳圖片。
不要只搜尋 opacity，還要檢查 filter 與偽元素。
不要直接刪除全站共用 CSS，先確認同一個 class 還用在哪些卡片。
不要在不知道文字對比需求時，把所有遮罩一次移除。

下次遇到可以先整理什麼

原圖網址與前台截圖。
圖片元素實際套用的 opacity、filter。
容器 ::before、::after 的 computed style。
遮罩規則來自區塊樣式、佈景主題還是自訂 CSS。
圖片上方是否需要放白色文字。