Khái quát
Mask là một lớp mặt nạ layer được sử dụng trong CSS để đè lên một phần tử nào đó nhằm ẩn đi một phần hoặc toàn bộ các nội dung bên trong phần tử.
Lưu ý khi sử dụng: Hầu hết trên tất cả trình duyệt, khi sử dụng Mask CSS bạn cần thêm tiền tố -webkit-.
Ví dụ
Ở HTML mình có một class mask. Bên trong Mask chứa một hình ảnh.
Hình ảnh minh họa:
Ngoài ra mình đã chuẩn bị sẳng một tấm hình làm layer Mask CSS như sau:
Tiến hành sử dụng tấm hình này làm mask cho element ban đầu.
.mask{
width: 100%;
height: 100vh;
-webkit-mask: url(mask1.png);
-webkit-mask-size: auto 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}Và đây là kết quả ta nhận được:
Như các bạn đã thấy tấm hình của chúng ta đã bị cắt sén đi chỉ chừa lại những phần có khu vực màu đen tương ứng với layer mask trong CSS.
Thuộc tính mask-image: Nhúng link hình ảnh được sử dụng làm layer mask.
Thuộc tính mask-size: Kích thước của layer mask.
Thuộc tính mask-repeat: Quy định việc hình ảnh layer mask có lặp lại hay không.
Thuộc tính mask-position: Quy định vị trí khung hình của mask.
Nhìn chung, các thuộc tính cấu hình cho background mask tương đồng với các thuộc tính config background image trong CSS.
Vậy là từ giờ với bất kì một Image nào được đặt trong layer mask đều tạo ra một hiệu ứng cắt sén đẹp tuyệt vời như trên.