mask-image
Baseline 2023
Newly 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-image
は CSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。
既定では、マスク画像のアルファチャンネルと要素のアルファチャンネルが乗算されることになります。これは mask-mode
プロパティで制御することができます。
css
/* キーワード値 */
mask-image: none;
/* <mask-source> 値 */
mask-image: url(masks.svg#mask1);
/* <image> 値 */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);
/* 複数の値 */
mask-image: image(url(mask.png), skyblue),
linear-gradient(rgba(0, 0, 0, 1), transparent);
/* グローバル値 */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: unset;
構文
値
none
-
このキーワードは、透明な黒い画像レイヤーとして解釈されます。
<mask-source>
<image>
-
マスク画像レイヤーとして使用される画像の値です。
公式定義
形式文法
mask-image =
<mask-reference>#
<mask-reference> =
none |
<image> |
<mask-source>
<image> =
<url> |
<gradient>
<mask-source> =
<url>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
マスク画像を URL で設定
仕様書
Specification |
---|
CSS Masking Module Level 1 # the-mask-image |
ブラウザーの互換性
BCD tables only load in the browser