mask-mode
CSS の mask-mode
プロパティは、 mask-image
で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。
/* キーワード値 */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;
/* 複数の値 */
mask-mode: alpha, match-source;
/* グローバル値 */
mask-mode: inherit;
mask-mode: initial;
mask-mode: unset;
構文
mask-mode
プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。
値
alpha
- このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
luminance
- このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。
match-source
-
mask-image
プロパティが<mask-source>
型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。<image>
型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。
公式定義
形式文法
例
アルファマスクモードの使用
CSS
#masked {
width: 227px;
height: 200px;
background: blue linear-gradient(red, blue);
mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
mask-mode: alpha; /* ライブサンプルで変更することができます */
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Masking Module Level 1 mask-mode の定義 |
勧告候補 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser