CSS - mask-composite

概要

属性名mask-composite
値<compositing-operator>#
値の詳細<compositing-operator> = add | subtract | intersect | exclude
初期値add
適用可能要素すべての要素。SVG においては <defs> 要素を除くコンテナ要素、グラフィック要素、および、<use> 要素
継承継承しない
サポートhttps://caniuse.com/mdn-css_properties_mask-composite

説明

mask-image でマスクイメージを複数指定した場合の混合モードを指定します。詳細は CSSマスク を参照してください。

add
下位のマスクに上位のマスクを加えます。
subtract
下位のマスクから上位のマスクを除外します。
intersect
下位のマスクと上位のマスクの重複部がマスクとなります。
exclude
下位のマスクと上位のマスクの重複していない部分がマスクとなります。

mask-image で複数の画像を指定している場合は、mask-composite にもカンマ(,)区切りで複数の値を指定することができます。

使用例

CSS
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

リンク

Copyright (C) 2024 杜甫々
初版：2024年12月29日、最終更新：2024年12月29日
https://www.tohoho-web.com/css/prop/mask-composite.htm