Chế độ mặt nạ - Thủ thuật CSS

Các mask-modethuộc tính CSS cho biết hình ảnh mặt nạ lớp CSS được coi là một mặt nạ alpha hoặc một mặt nạ sáng.

.element ( mask-image: url(sun.svg); mask-mode: alpha; )

Cú pháp

mask-mode: alpha | luminance | match-source

Khách sạn chấp nhận một giá trị từ khóa, hoặc một danh sách bằng dấu phẩy của hai hoặc cả ba alpha, luminancevà mask-sourcegiá trị.

Giá trị ban đầu: match-source
Á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.
Kế thừa: không
Giá trị tính toán: như đã chỉ định
Loại hoạt ảnh: rời rạc

Giá trị

/* Keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* Global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset;

alpha: chỉ định rằng các giá trị alpha (kênh alpha) của hình ảnh lớp mặt nạ sẽ được sử dụng làm giá trị mặt nạ.
luminance: chỉ định rằng các giá trị độ chói của hình ảnh mặt nạ nên được sử dụng làm giá trị mặt nạ.
match-source: giá trị mặc định, đặt chế độ mặt nạ thành alpha nếu tham chiếu mặt nạ của thuộc mask-imagetính là một phần tử CSS như URL hình ảnh hoặc gradient. Tuy nhiên, nếu tham chiếu mặt nạ của thuộc mask-imagetính là một phần tử SVG , thì giá trị được chỉ định bởi thuộc tính kiểu mặt nạ của phần tử được tham chiếu phải được sử dụng.
initial: áp dụng cài đặt mặc định của thuộc tính, đó là match-source.
inherit: thông qua giá trị chế độ mặt nạ của cha mẹ.
unset: loại bỏ chế độ mặt nạ hiện tại khỏ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 các giá trị được phân tách bằng dấu phẩy cho các chế độ mặt nạ và mỗi giá trị được áp dụng cho một hình ảnh lớp mặt nạ tương ứng được chỉ định trong thuộc tính mask-image.

Trong ví dụ sau, giá trị đầu tiên chỉ định chế độ mặt nạ tương ứng với hình ảnh đầu tiên, giá trị thứ hai cho hình ảnh thứ hai, v.v.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-mode: luminance, alpha, match-source; )

Mặt nạ alpha và độ sáng

Tạo mặt nạ trong CSS đi kèm với hai phương pháp có một số khác biệt trong việc tính toán các giá trị mặt nạ.

Mặt nạ alpha

Hình ảnh được tạo ra từ các pixel, mỗi pixel có một số dữ liệu chứa các giá trị màu và có thể là các giá trị alpha với thông tin về độ trong suốt. Hình ảnh có kênh alpha có thể là mặt nạ alpha , giống như hình ảnh PNG có vùng màu đen và trong suốt.

Trong một thao tác tạo mặt nạ đơn giản, chúng ta có một phần tử và một hình ảnh mặt nạ được đặt trên đó. Giá trị alpha của mỗi pixel trong hình ảnh mặt nạ sẽ được hợp nhất với pixel tương ứng của nó trong phần tử.

Nếu giá trị alpha bằng 0 (tức là trong suốt), nó sẽ thắng và phần đó của phần tử bị che (tức là bị ẩn).
Giá trị alpha của một (tức là hoàn toàn mờ) cho phép hiển thị pixel đó của phần tử.
Giá trị từ 0 đến 1 (ví dụ: 0,5) cho phép pixel có thể nhìn thấy được nhưng với một mức độ trong suốt nhất định.

Vì vậy, trong phương pháp này, giá trị mặt nạ tại một điểm đã cho chỉ đơn giản là giá trị của kênh alpha tại điểm đó của hình ảnh mặt nạ và các kênh màu không đóng góp vào giá trị mặt nạ.

Ví dụ bên dưới là mặt nạ alpha chỉ chứa các vùng màu đen (giá trị alpha là 1) và trong suốt (giá trị alpha là 0) và bạn có thể thấy kết quả có một số phần hiển thị hoàn toàn và một số phần khác hoàn toàn trong suốt:

Sử dụng PNG có kênh alpha làm hình ảnh mặt nạ

Nhưng trong ví dụ sau, chúng tôi đang sử dụng một gradient có mức độ trong suốt khác nhau. Kết quả không chỉ hiển thị hoặc trong suốt mà còn có một số khu vực mờ:

img ( mask-image: linear-gradient(black, transparent); mask-mode: alpha; )

Và đây là kết quả trong trình duyệt:

Sử dụng một gradient tuyến tính làm hình ảnh mặt nạ

Mặt nạ độ sáng

Trong mặt nạ độ sáng, màu sắc và giá trị alpha quan trọng. Khi giá trị alpha là 0 (tức là hoàn toàn trong suốt), phần tử bị ẩn; khi có giá trị alpha là 1, các giá trị mặt nạ khác nhau tùy thuộc vào kênh màu của pixel đó. Ví dụ, khi màu trắng, phần tử có thể nhìn thấy được; trong trường hợp vùng đen, phần tử bị ẩn.

Trong khi việc tính toán các giá trị mặt nạ trong mặt nạ alpha chỉ dựa trên các giá trị alpha của hình ảnh mặt nạ, các giá trị mặt nạ của mặt nạ độ sáng được tính từ độ sáng và giá trị alpha. Trình duyệt thực hiện việc này theo các bước sau:

Tính toán giá trị độ chói từ các giá trị kênh màu.
Nhân giá trị độ chói đã tính với giá trị alpha tương ứng để tạo ra giá trị mặt nạ.

/ giải thích Để biết thêm thông tin về các tính toán này, bạn có thể xem phần xử lý mặt nạ trong thông số kỹ thuật Mô-đun tạo mặt nạ CSS 1 từ Bản thảo của người biên tập tháng 9 năm 2019.

Bellow là hình ảnh mặt nạ với mặt trời trắng ở trung tâm và các vùng trong suốt xung quanh nó. Như bạn có thể thấy, các khu vực trong khi hiển thị đầy đủ:

Sử dụng hình ảnh PNG với kênh alpha và các vùng trắng làm hình ảnh mặt nạ

Và trong ví dụ tiếp theo, một gradient đầy màu sắc được sử dụng làm hình ảnh mặt nạ và bạn có thể thấy ảnh hưởng của các màu khác nhau trên các giá trị mặt nạ trong chế độ độ sáng: