mask-mode

例

基本例

要素のマスクのモードを制御するには、mask-alpha、mask-luminance、およびmask-matchユーティリティを使用します。

<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を使用すると、マスクの不透明度がマスクされた要素の可視性を決定します。

レスポンシブデザイン

プレフィックスa mask-modeユーティリティ md:のようなブレークポイントバリアントとともにユーティリティを適用してmedium 以上の画面サイズ

<div class="mask-alpha md:mask-luminance ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。