Tạo mặt nạ trong CSS là một cách để ẩn các phần của phần tử và hiển thị những phần khác. Khác là clip-path, nhưng chúng ta đừng tập trung vào điều đó ngày hôm nay. “Mặt nạ là hình ảnh; Clip là đường dẫn ”là một cách để suy nghĩ về sự khác biệt, mặc dù nó chắc chắn gây nhầm lẫn.
Trong video này, chúng ta sẽ xem xét sự tương tự maskvà các mask-*thuộc tính của nó thực sự giống với các thuộc tính backgroundvà background-*. Và chúng có thể được sử dụng cùng nhau một cách độc đáo, mặt nạ là một cách để ẩn một số phần của hình ảnh nhưng vẫn tiết lộ nội dung và nền của các phần khác.
SVG rất phù hợp cho các mặt nạ, vì bản chất vector cho phép chúng chia tỷ lệ độc đáo và kích thước tệp thường nhỏ là đẹp. Một trong những điều khó hiểu xung quanh mặt nạ là mask-type. Các alphaphương tiện giá trị mà những phần trong suốt của hình ảnh trở thành những phần trong suốt của mặt nạ (mà đôi khi nhiều tâm-uốn hơn bạn hy vọng). Một luminancegiá trị có nghĩa là màu trắng trong suốt và màu đen trong suốt và màu xám ở giữa. Có còn đường nào khác không? Và mặt nạ đã có kênh alpha thì sao? Và các khu vực trong tệp SVG không có gì trong đó được coi là alpha trong suốt? Có lẽ? Hãy chơi.