mask-image

mask-imageCSS のプロパティで、要素のマスクレイヤーとして使用される画像を設定します。

/* キーワード値 */
mask-image: none;

/* <mask-source> 値 */
mask-image: url(masks.svg#mask1);

/* <image> 値 */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* 複数の値 */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

/* グローバル値 */
mask-image: inherit;
mask-image: initial;
mask-image: unset;
初期値none
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
メディア視覚
計算値as specified, but with url values made absolute
アニメーションの種類個別
正規順序構文通り

構文

none
このキーワードは、透明な黒い画像レイヤーとして解釈されます。
<mask-source>
<url> による <mask> または CSS 画像への参照です。
<image>
マスク画像レイヤーとして使用有れる画像の値です。

形式文法

<mask-reference>#

where
<mask-reference> = none | <image> | <mask-source>

where
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<mask-source> = <url>

where
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>

where
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | <percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

where
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

HTML

<div id="masked"></div>

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-image の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-imageChrome 完全対応 1
接頭辞付き 補足
完全対応 1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 From version 8, Chrome added support for gradient values. Initially, Chrome supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Edge 完全対応 16Firefox 完全対応 53IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Initially, Safari supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
WebView Android 完全対応 2
接頭辞付き 補足
完全対応 2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Initially, Android supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Chrome Android 完全対応 18
接頭辞付き 補足
完全対応 18
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 From version 8, Chrome added support for gradient values. Initially, Chrome supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Firefox Android 完全対応 53Opera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 3.2
接頭辞付き 補足
完全対応 3.2
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Initially, Safari supported only -webkit- prefixed values for gradients (such as -webkit-linear-gradient()). Later, support for unprefixed values was added.
Samsung Internet Android 完全対応 1.0
接頭辞付き
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Multiple mask imagesChrome 完全対応 1Edge 完全対応 18Firefox 完全対応 53IE 未対応 なしOpera 完全対応 15Safari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 53Opera Android 完全対応 14Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
SVG masksChrome 完全対応 8Edge 完全対応 18Firefox 完全対応 53IE 未対応 なしOpera 完全対応 15Safari 完全対応 4WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 53Opera Android 完全対応 14Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。