mask-mode
Baseline 2023Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
mask-mode は CSS のプロパティで、 mask-image で定義されたマスクを、輝度とアルファマスクのどちらで扱うかを設定します。
css
/* キーワード値 */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* 複数の値 */
mask-mode: alpha, match-source;
/* グローバル値 */
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: unset;
構文
mask-mode プロパティは、以下に示す 1 つまたは複数のキーワード値を、カンマで区切って指定します。
値
alpha-
このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
luminance-
このキーワードは、マスクレイヤーの輝度の値をマスクの値として使用することを示します。
match-source-
mask-imageプロパティが<mask-source>型であれば、マスクレイヤー画像の輝度の値がマスクの値として使用されます。<image>型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。
公式定義
| 初期値 | match-source |
|---|---|
| 適用対象 | すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
例
アルファマスクモードの使用
仕様書
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask-mode |