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 Module Level 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 屬性