CSS mask-composite 属性

定義と使用方法

mask-composite この属性は、現在のマスクレイヤーとその下のマスクレイヤーが使用する合成操作を指定します。

例

表示 mask-composite 属性の異なる値：

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

自分で試してみてください

CSS 文法

mask-composite: add|subtract|intersect|exclude|initial|inherit;

属性値

値 説明
add ソースマスクレイヤーがターゲットマスクレイヤーの上に配置されています。
subtract ソースマスクレイヤーがターゲットマスクレイヤーの外に配置されている部分。
intersect ソースマスクレイヤーとターゲットマスクレイヤーが重なっている部分をターゲットマスクレイヤーで置き換えます。
exclude ソースマスクレイヤーとターゲットマスクレイヤーが重なっていない部分をマージします。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性は、親要素からこの属性を継承します。参照してください： inherit。

技術的詳細

デフォルト値： add
継承性： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS Masking モジュール レベル 1
JavaScript 文法： object.style.maskComposite="intersect"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

関連ページ

チュートリアル：CSS 遮罩

参照：CSS mask 属性

参照：CSS mask-clip 属性

参照：CSS mask-image 属性

参照：CSS mask-mode 属性

参照：CSS mask-origin 属性

参照：CSS mask-position 属性

参照：CSS mask-repeat 属性

参照：CSS mask-size 属性

参照：CSS mask-type 属性