pantoken / plugins/pantoken/colors/src / overlayColors

函式: overlayColors() ​

overlayColors(base, overlay, percent?): string

Beta（測試）

將 overlay（以 percent% 強度）平鋪於一個不透明的 base 上──作為 ui-color-utils overlayColors 的純 CSS 代替品。該輔助函式以 source-over 方式將兩個 RGBA 顏色合成為一個不透明的 結果；常見情況（半透明色調覆蓋在實體表面上）正好是一個由兩色組成的 color-mix()。一般的 RGBA 對 RGBA 合成無法表示為單一 CSS 顏色，因此此處僅涵蓋不透明底色的情形。

參數 ​

base ​

string

不透明的背景顏色。

overlay ​

string

覆蓋在其上的顏色。

percent? ​

number = 50

有多少 overlay 顯現出來，範圍 0–100（預設 50）。

回傳 ​

string

一個 color-mix() 表達式。

範例 ​

ts
overlayColors("var(--surface)", "var(--brand)", 12);
// "color-mix(in srgb, var(--brand) 12%, var(--surface))"