Thuộc tính mask-composite CSS

Trang trước mask-clip
Trang tiếp theo mask-image

Định nghĩa và cách sử dụng

mask-composite Thuộc tính này xác định thao tác hợp nhất được sử dụng bởi lớp che mờ hiện tại và lớp che mờ bên dưới.

Mẫu

Hiển thị mask-composite Giá trị khác nhau của thuộc tính:

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

Thử ngay

Ngữ pháp CSS

mask-composite: add|subtract|intersect|exclude|initial|inherit;

Giá trị thuộc tính

Giá trị	Mô tả
add	Phần đặt trên lớp che mờ mục tiêu của lớp che mờ nguồn.
subtract	Phần đặt ngoài lớp che mờ mục tiêu của lớp che mờ nguồn.
intersect	Phần chồng lên của lớp che mờ nguồn và lớp che mờ mục tiêu thay thế lớp che mờ mục tiêu.
exclude	Khu vực không chồng lên của lớp che mờ nguồn và lớp che mờ mục tiêu được hợp nhất.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	add
Thừa kế:	Không
Chế tạo animation:	Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	Module Masking CSS Level 1
Ngữ pháp JavaScript:	object.style.maskComposite="intersect"