mask-type
mask-type は CSS のプロパティで、 SVG の <mask> 要素に適用されます。これは、マスクの輝度（明度）またはアルファ (透過率) のどちらのコンテンツを使用するかを定義します。このプロパティは、mask-mode プロパティによって上書きされる場合があります。 mask-type プロパティは、画像マスクやグラデーションマスクには効果はありません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 24 | 79 | 35 | 7 | 25 | 7 | |
alpha | 24 | 79 | 35 | 7 | 25 | 7 |
luminance | 24 | 79 | 35 | 7 | 25 | 7 |
基本構文
CSS
mask#alpha-mask {
mask-type: alpha;
}
mask#luma-mask {
mask-type: luminance;
}ライブデモ
実務での使いどころ
-
SVGマスクの種類制御
グラデーションマスクで輝度マスクを使用し、明るさに基づいた滑らかなフェード効果を作成します。
注意点
- mask-typeはSVGの<mask>要素に対してのみ適用されます。CSS要素に直接適用する場合はmask-modeを使用してください。
アクセシビリティ
- マスク効果によってコンテンツが過度に隠されないようにし、重要な情報が常に視認可能であることを確認してください。