用 CSS color-mix() 解決背景透明度的痛點

在設計卡片組件時，經常遇到這樣的需求：卡片背景需要80%透明度，鼠標懸浮在內部某項時，修改背景色但保持同樣的透明度。

問題場景

.card {background: rgba(59, 130, 246, 0.8); /* 藍色80%透明度 */
}.card-item:hover {/* 想要綠色背景，同樣80%透明度 */background: rgba(34, 197, 94, 0.8);
}

看似簡單，但當使用CSS變量時就會遇到問題。

常見的錯誤方案

方案1：使用 opacity（?）

.card-item:hover {background: var(--green-color);opacity: 0.8; /* 整個元素變淡，包括文字 */
}

問題：opacity 會影響整個元素，文字也會變淡，用戶體驗差。

方案2：使用 rgba with from（??）

.card-item:hover {background: rgba(from var(--green-color) r g b / 0.8);
}

問題：只支持rgb格式的變量，如果 --green-color: #22c55e，這種寫法會失效。

完美解決方案：color-mix()

.card-item:hover {background: color-mix(in srgb, var(--green-color) 80%, transparent);
}

實際應用

:root {--primary: #3b82f6;--success: #22c55e;--warning: #f59e0b;
}.card {background: color-mix(in srgb, var(--primary) 80%, transparent);padding: 1rem;
}.card-item {padding: 0.5rem;border-radius: 4px;transition: background 0.2s;
}.card-item:hover {background: color-mix(in srgb, var(--success) 80%, transparent);
}.card-item.warning:hover {background: color-mix(in srgb, var(--warning) 80%, transparent);
}

color-mix() 特點

1. 兼容所有顏色格式：無論變量是 #fff、rgb(255,255,255) 還是 hsl(0,0%,100%)
2. 只影響背景：文字保持清晰，不會變淡
3. 語義清晰：80% 主色 + 20% 透明 = 80% 透明度
4. 易于維護：修改透明度只需改一個數值

瀏覽器兼容性

現代瀏覽器都支持，如需兼容舊版本：

.card-item:hover {background: rgba(34, 197, 94, 0.8); /* fallback */background: color-mix(in srgb, var(--success) 80%, transparent);
}

總結

當需要為CSS變量添加透明度時，color-mix() 是最佳選擇。它解決了 opacity 影響整體元素和 rgba(from) 格式限制的問題，讓背景透明度控制變得簡單而優雅。