CSS mask 属性
- 前のページ marker-start
- 次のページ mask-clip
定義と用法
mask 属性は、マスクやカットアウトを使用して要素（部分または全部）を隠すために使用されます。
mask 属性は以下の属性の短縮形です：
例
例1
画像にマスクレイヤーを作成します：
.mask1 {
mask: url(w3logo.png) no-repeat 50% 50%;
}
例2
画像に異なるマスクレイヤーを作成するための線形渐変と円形渐変を使用します：
.mask1 {
mask: linear-gradient(black, transparent);
}
.mask2 {
mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
例3
SVG <mask> 元素を使用して画像にマスクレイヤーを作成します：
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
例4
SVG <mask> 元素を使用して画像にマスクレイヤーを作成します：
<svg width="600" height="400">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
CSS 文法
mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| mask-image | 要素のマスクレイヤーとして使用される画像を指定します。デフォルト値は none です。 |
| mask-mode |
マスクレイヤー画像が明るさマスクとしてもしくはアルファマスクとして見なされるかを指定します。 デフォルト値は match-source です。 |
| mask-repeat |
マスク画像がどのように/何度繰り返されるかを設定します。 デフォルト値は repeat です。 |
| mask-position |
マスク画像の開始位置（マスク位置エリアに対して）を設定します。 デフォルト値は 0% 0% です。 |
| mask-clip |
マスク画像が影響するエリアを指定します。 デフォルト値は border-box です。 |
| mask-origin |
マスクレイヤー画像の開始位置（マスク位置エリア）を指定します。 デフォルト値は border-box です。 |
| mask-size |
マスクレイヤー画像のサイズを指定します。 デフォルト値は auto です。 |
| mask-composite |
現在のマスクレイヤーと下のマスクレイヤーが使用する合成操作を指定します。 デフォルト値は add です。 |
| initial | この属性をデフォルト値に設定します。参照してください： initial。 |
| inherit | この属性は親要素から継承されます。参照してください： inherit。 |
技術的詳細
| デフォルト値： | none match-source repeat 0% 0% border-box border-box auto add |
|---|---|
| 継承性： | いいえ |
| アニメーション作成： | サポートしていません。参照してください：アニメーション関連属性。 |
| バージョン： | CSS Masking モジュール レベル1 |
| JavaScript 文法： | object.style.mask="url(star.svg)" |
ブラウザのサポート
テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 120 | 120 | 53 | 15.4 | 106 |
関連ページ
チュートリアル：CSS 遮罩
参照：CSS mask 属性
- 前のページ marker-start
- 次のページ mask-clip
