Effects
用於控制元素遮罩模式的通用類別。
| Class | Styles |
|---|---|
mask-alpha | mask-mode: alpha; |
mask-luminance | mask-mode: luminance; |
mask-match | mask-mode: match-source; |
使用 mask-alpha、mask-luminance 和 mask-match 通用類別來控制元素遮罩的模式：
mask-alpha
mask-luminance
<div class="mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ..."></div>使用 mask-luminance 時，遮罩的亮度值決定可見度，因此使用灰階顏色會產生最可預測的結果。使用 mask-alpha 時，遮罩的透明度決定被遮罩元素的可見度。
在 mask-mode 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="mask-alpha md:mask-luminance ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。