Effects
用於控制 SVG 遮罩如何被解讀的通用類別。
| Class | Styles |
|---|---|
mask-type-alpha | mask-type: alpha; |
mask-type-luminance | mask-type: luminance; |
使用 mask-type-alpha 和 mask-type-luminance 通用類別來控制 SVG 遮罩的類型：
mask-type-alpha
mask-type-luminance
<svg> <mask id="blob1" class="mask-type-alpha fill-gray-700/70"> <path d="..."></path> </mask> <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" /></svg><svg> <mask id="blob2" class="mask-type-luminance fill-gray-700/70"> <path d="..."></path> </mask> <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" /></svg>使用 mask-type-luminance 時，SVG 遮罩的亮度值決定可見度，因此使用灰階顏色會產生最可預測的結果。使用 mask-alpha 時，SVG 遮罩的透明度決定被遮罩元素的可見度。
在 mask-type 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<mask class="mask-type-alpha md:mask-type-luminance ..."> <!-- ... --></mask>在變體文件中了解更多關於使用變體的資訊。