Thuộc tính mask-composite

Thuộc tính mask-composite cho phép kết hợp nhiều mặt nạ được áp dụng cho một phần tử. Nó xác định các mặt nạ khác nhau sẽ tương tác với nhau như thế nào khi chồng lên nhau.

Cú pháp

cssbộ chọn {
  mask-composite: <toán-tử-tổng-hợp>#;
}

Giá trị

Ví dụ . Chế độ add

Hợp nhất hai mặt nạ (hình trái tim và mũi tên):

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;
}

Результат:

Ví dụ . Chế độ subtract

Trừ mũi tên khỏi hình trái tim:

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;
}

Результат:

Ví dụ . Chế độ intersect

Chỉ hiển thị vùng giao nhau của các mặt nạ:

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;
}

Результат:

Ví dụ . Chế độ exclude

Hiển thị các vùng không chung cho tất cả:

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;
}

Результат:

Ví dụ . Kết hợp với gradient

Sử dụng với mặt nạ gradient:

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;
}

Результат:

Xem thêm