Mặt nạ-xuất xứ - Thủ thuật CSS

Chỉ mask-originđịnh khu vực vị trí mặt nạ của hình ảnh lớp mặt nạ. Nói cách khác, nó xác định nguồn gốc của hình ảnh lớp mặt nạ ở đâu, cho dù đó là cạnh của đường viền, phần đệm hay hộp nội dung.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

Đối với các phần tử được hiển thị dưới dạng một hộp, hãy mask-originchỉ định vùng định vị mặt nạ. Đối với các phần tử được hiển thị dưới dạng nhiều hộp (ví dụ: hộp nội tuyến trên một số dòng, hộp trên một số trang), thuộc tính chỉ định hộp nào box-decoration-breakhoạt động để xác định vùng định vị mặt nạ.

Thuộc tính này hoạt động giống như thuộc background-origintính, ngoại trừ nó có giá trị ban đầu khác nhau và ba giá trị bổ sung áp dụng cho các phần tử SVG.

Trong bản demo sau, bạn có thể thay đổi nguồn gốc của hình ảnh lớp mặt nạ. Có cùng một hình ảnh bên dưới để hiển thị hiệu ứng che lấp tốt hơn và đánh dấu các khu vực đường viền và đệm:

Cú pháp

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Giá trị ban đầu: border-box
Áp dụng cho: Tất cả các phần tử. Trong SVG, nó áp dụng cho các phần tử vùng chứa ngoại trừ phần tử, tất cả các phần tử đồ họa và phần tử.
Kế thừa: không
Loại hoạt ảnh: rời rạc

Giá trị

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Định nghĩa giá trị

content-box: Vị trí liên quan đến hộp nội dung. Gốc của mask-imageđược đặt ở góc trên bên trái của cạnh nội dung.
padding-box: Vị trí liên quan đến hộp đệm. Nguồn gốc của hình ảnh mặt nạ tại 0 0được đặt ở góc trên bên trái của cạnh đệm, 100% 100%là góc dưới cùng bên phải.
border-box: Giá trị mặc định, đặt vị trí liên quan đến hộp viền.
margin-box: Vị trí liên quan đến hộp ký quỹ
fill-box: Vị trí liên quan đến hộp giới hạn đối tượng
stroke-box: Vị trí liên quan đến hộp giới hạn hành trình
view-box: Sử dụng khung xem SVG gần nhất làm hộp tham chiếu. Nếu một viewBoxthuộc tính được chỉ định cho phần tử tạo chế độ xem SVG thì hộp tham chiếu được đặt tại điểm gốc của hệ tọa độ được thiết lập bởi viewBoxthuộc tính và kích thước của hộp tham chiếu được đặt thành widthvà heightcác giá trị của viewBoxthuộc tính.
initial: Áp dụng cài đặt mặc định của thuộc tính, đó làborder-box
inherit: Thông qua mask-origingiá trị của cha mẹ.
unset: Loại bỏ dòng điện mask-originkhỏi phần tử.

Sử dụng nhiều giá trị

Thuộc tính này có thể nhận một danh sách giá trị được phân tách bằng dấu phẩy cho nguồn gốc mặt nạ, trong đó mỗi giá trị được áp dụng cho hình ảnh lớp mặt nạ tương ứng được chỉ định trong thuộc mask-imagetính. Trong ví dụ sau, giá trị đầu tiên chỉ định nguồn gốc của hình ảnh đầu tiên, giá trị thứ hai chỉ định nguồn gốc của hình ảnh thứ hai, v.v.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Ghi chú

Đối với yếu tố SVG mà không cần hộp liên quan bố trí CSS, các giá trị content-box, padding-boxvà border-boxtính toán đến fill-box.
Đối với các yếu tố liên quan với hộp CSS bố trí, các giá trị fill-box, stroke-boxvà view-boxtính toán với initialgiá trị của mask-origin, đó là border-box.

Bản giới thiệu

Khi chúng ta lặp lại hình ảnh lớp mặt nạ, trường hợp đầu tiên được đặt ở góc trên bên trái của vùng định vị được chỉ định, và sau đó nó được lặp lại bắt đầu từ đó theo giá trị của thuộc mask-repeattính.

Thay đổi giá trị cho mask-origintrong bản demo sau để hiểu rõ hơn về những gì đang xảy ra: