Sifa ya mask-composite

Sifa mask-composite inaruhusu kuchanganya maski nyingi zinazotumika kwa kipengele kimoja. Inabainisha jinsi maski tofauti zitakavyoshirikiana wakati zimewekwa juu.

Kiambishi

csskichaguzi {
  mask-composite: <compositing-operator>#;
}

Thamani

Thamani	Maelezo
`add`	Matokeo - muunganiko wa maski zote (msingi).
`subtract`	Maski ya pili inatolewa kutoka kwa ya kwanza.
`intersect`	Eneo la makutano la maski pekee ndilo linaonyeshwa.
`exclude`	Maeneo yasiyo ya kawaida kwa maski ndiyo yanaonyeshwa.

Mfano . Hali ya add

Kuunganisha maski mbili (moyo na mshale):

html<img id="picha" src="image.jpg">

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: 
    url("heart.svg"),
    url("arrow.svg");
  mask-position: 
    100px 50px,
    200px 30px;
  mask-size: 150px;
  mask-repeat: no-repeat;
  mask-composite: add;
}

Результат:

Mfano . Hali ya subtract

Kutoa mshale kutoka kwa moyo:

html<img id="picha" src="image.jpg">

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: 
    url("heart.svg"),
    url("arrow.svg");
  mask-position: 
    100px 50px,
    170px 80px;
  mask-size: 
    250px,
    120px;
  mask-repeat: no-repeat;
  mask-composite: subtract;
}

Результат:

Mfano . Hali ya intersect

Kuonyesha eneo la makutano la maski pekee:

html<img id="picha" src="image.jpg">

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: 
    url("heart.svg"),
    url("arrow.svg");
  mask-position: 
    100px 50px,
    50px 30px;
  mask-size: 150px;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

Результат:

Mfano . Hali ya exclude

Kuonyesha maeneo yasiyo ya kawaida:

html<img id="picha" src="image.jpg">

css#picha {
  upana: 500px;
  urefu: 281px;
  mask-image: 
    url("heart.svg"),
    url("arrow.svg");
  mask-position: 
    100px 50px,
    50px 30px;
  mask-size: 150px;
  mask-repeat: no-repeat;
  mask-composite: exclude;
}

Результат:

Mfano . Mchanganyiko na Gradients

Matumizi na maski za gradient:

html<div id="kisanduku-cha-gradient"></div>

css#kisanduku-cha-gradient {
  upana: 400px;
  urefu: 400px;
  background: linear-gradient(45deg, nyekundu, manjano, kijani, bluu);
  mask-image: 
    radial-gradient(duara kwenye 30% 30%, nyeusi 40%, uwazi 70%),
    radial-gradient(duara kwenye 70% 70%, nyeusi 40%, uwazi 70%);
  mask-composite: exclude;
}

Результат:

Angalia Pia

sifa mask-image,
inabainisha picha za maski
sifa mask,
ufupisho wa sifa zote za kufunika
sifa mask-mode,
inabainisha hali ya kuweka maski
sifa mix-blend-mode,
inabainisha hali ya kuweka vipengele