エフェクト
SVGマスクの解釈方法を制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
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マスクの不透明度がマスクされた要素の可視性を決定します。
プレフィックスa mask-type ユーティリティ md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用する対象をmedium 以上の画面サイズに限定します。
<mask class="mask-type-alpha md:mask-type-luminance ..."> <!-- ... --></mask>バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。