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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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>

url() による <mask> または CSS 画像への参照です。

<image>

マスク画像レイヤーとして使用される画像の値です。

公式定義

初期値none
適用対象すべての要素。 SVG の場合は <defs> 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り、ただし <url> の値は絶対パスになる
アニメーションの種類離散値

形式文法

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

ブラウザーの互換性

関連情報