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-imageCSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。 既定では、マスク画像のアルファチャンネルと要素のアルファチャンネルが乗算されることになります。これは 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-image
Multiple mask images
SVG masks

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報