Хосияти mask-composite

Хосияти mask-composite имкон медиҳад, ки чанд маскеро, ки ба як унсур татбиқ карда мешаванд, комбинатсия кунед. Ин муайян мекунад, ки чанд маски гуногун чӣ гуна бо ҳам муомила мекунанд, вақте ки онҳо бар ҳам гузошта мешаванд.

Синтаксис

cssинтихобкунанда {
  mask-composite: <compositing-operator>#;
}

Қиматҳо

Намуна . Ҳолати add

Муттаҳид кардани ду маск (дилча ва тир):

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

css#image {
  width: 500px;
  height: 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;
}

Результат:

Намуна . Ҳолати subtract

Хориҷ кардани тир аз дилча:

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

css#image {
  width: 500px;
  height: 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;
}

Результат:

Намуна . Ҳолати intersect

Намоиши фақат минтақаи буриши маскҳо:

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

css#image {
  width: 500px;
  height: 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;
}

Результат:

Намуна . Ҳолати exclude

Намоиши минтақаҳое, ки умумӣ нестанд:

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

css#image {
  width: 500px;
  height: 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;
}

Результат:

Намуна . Комбинатсия бо градиентҳо

Истифода бо маскҳои градиентӣ:

html<div id="gradient-box"></div>

css#gradient-box {
  width: 400px;
  height: 400px;
  background: linear-gradient(45deg, red, yellow, green, blue);
  mask-image: 
    radial-gradient(circle at 30% 30%, black 40%, transparent 70%),
    radial-gradient(circle at 70% 70%, black 40%, transparent 70%);
  mask-composite: exclude;
}

Результат:

Инчунин бубинед