將色調濾鏡僅應用於畫布元素的背景圖像，但不應用於其文本/僅適用於文本而不適用於背景

Question

我正在使用javascript在HTML畫布元素的背景圖像上應用色調旋轉濾鏡，但是當我添加文字時有一個蒙版圖像，文本的蒙版也受到色調過濾器的影響。

我該如何做到這一點，所以畫布的圖像背景有一個色調過濾器，並且文本蒙版有另一個色調過濾器，不受背景的影響？例如，背景色調爲紅色，文本遮罩色調爲黃色，或者遮罩沒有色調，但是背景會是，或者相反。

在此先感謝！

編輯：順便說一句，我也設置畫布背景圖像的JavaScript，而不是CSS。

Answer 1

也許你可以嘗試在css中使用Z-index選擇器來將色相和圖像進一步移回文本。

img, hue { 
 
    z-index="a #" 
 
}

<p>text</p> 
 
<img src=""/> 
 
<!--insert hue however you do it-->

我從這裏關於這個的信息：https://www.codecademy.com/en/courses/learn-html-css/lessons/layout/exercises/z-index

如果您需要澄清。