Tạo mặt nạ CSS cung cấp cho bạn tùy chọn sử dụng hình ảnh làm lớp mặt nạ. Điều này có nghĩa là bạn có thể sử dụng hình ảnh, SVG hoặc độ dốc làm mặt nạ để tạo các hiệu ứng thú vị mà không cần trình chỉnh sửa hình ảnh.
Khi bạn cắt một phần tử bằng thuộc tính clip-path, vùng được cắt sẽ bị ẩn đi.
Nếu bạn muốn làm mờ một phần của hình ảnh hoặc áp dụng một số hiệu ứng khác cho hình ảnh đó, thì bạn cần phải sử dụng tính năng tạo mặt nạ.
Bài đăng này giải thích cách sử dụng thuộc tính mask-image trong CSS,
lớp này cho phép bạn chỉ định một hình ảnh để sử dụng làm lớp mặt nạ.
Theo đó, bạn sẽ có 3 lựa chọn. Bạn có thể sử dụng tệp hình ảnh làm mặt nạ, SVG hoặc chuyển màu.
Khả năng tương thích với trình duyệt
Hầu hết các trình duyệt chỉ hỗ trợ một phần cho thuộc tính tạo mặt nạ CSS chuẩn.
Bạn sẽ cần sử dụng tiền tố -webkit- cùng với thuộc tính chuẩn để đạt được khả năng tương thích tốt nhất với trình duyệt.
Hãy xem bài viết Tôi có thể sử dụng mặt nạ CSS không? để biết toàn bộ thông tin hỗ trợ về trình duyệt.
Mặc dù chúng tôi có hỗ trợ trình duyệt bằng cách sử dụng thuộc tính có tiền tố,
khi sử dụng tính năng tạo mặt nạ để hiển thị văn bản phía trên hình ảnh, hãy chú ý đến điều sẽ xảy ra nếu tính năng tạo mặt nạ không khả dụng.
Bạn nên sử dụng các truy vấn tính năng để phát hiện khả năng hỗ trợ cho mask-image hoặc -webkit-mask-image
và cung cấp bản dự phòng dễ đọc trước khi thêm phiên bản bị che giấu.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
Tạo mặt nạ bằng hình ảnh
Thuộc tính mask-image hoạt động theo cách tương tự như thuộc tính background-image.
Dùng giá trị url() để truyền vào hình ảnh.
Hình ảnh mặt nạ của bạn cần có một vùng trong suốt hoặc bán trong suốt.
Vùng trong suốt hoàn toàn sẽ làm cho phần hình ảnh bên dưới vùng đó không nhìn thấy được. Sử dụng vùng bán trong suốt tuy nhiên sẽ cho phép một số hình ảnh gốc hiển thị qua. Bạn có thể thấy sự khác biệt trong sự cố nhiễu bên dưới. Hình ảnh đầu tiên là hình ảnh ban đầu của những quả bóng bay không có mặt nạ. Hình ảnh thứ hai áp dụng mặt nạ, có một ngôi sao màu trắng trên nền hoàn toàn trong suốt. Hình ảnh thứ ba có một ngôi sao màu trắng trên nền với độ trong suốt chuyển màu.
Trong ví dụ này, tôi cũng sử dụng thuộc tính mask-size với giá trị cover.
Thuộc tính này hoạt động giống như background-size.
Bạn có thể sử dụng từ khoá cover và contain hoặc đặt kích thước cho nền bằng cách sử dụng bất kỳ đơn vị độ dài hoặc tỷ lệ phần trăm hợp lệ nào.
Bạn cũng có thể lặp lại mặt nạ giống như bạn có thể lặp lại hình nền, để sử dụng một hình ảnh nhỏ làm mẫu lặp lại.
Tạo mặt nạ bằng SVG
Thay vì sử dụng tệp hình ảnh làm mặt nạ, bạn có thể dùng SVG.
Có một số cách để đạt được điều này.
Trước tiên, bạn cần có một phần tử <mask> bên trong SVG và tham chiếu đến mã nhận dạng của phần tử đó trong thuộc tính mask-image.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Ưu điểm của phương pháp này là mặt nạ có thể được áp dụng cho bất kỳ phần tử HTML nào, không chỉ hình ảnh. Rất tiếc, Firefox là trình duyệt duy nhất hỗ trợ phương pháp này.
Tuy nhiên, đối với trường hợp phổ biến nhất khi che hình ảnh, mọi thông tin đều sẽ không bị mất chúng tôi có thể đưa hình ảnh đó vào SVG.
Tạo mặt nạ bằng hiệu ứng chuyển màu
Sử dụng độ dốc CSS làm mặt nạ là một cách tinh tế để đạt được vùng bị che khuất mà không cần gặp rắc rối khi tạo hình ảnh hoặc SVG.
Ví dụ: Một dải chuyển màu tuyến tính đơn giản được dùng làm mặt nạ có thể đảm bảo rằng phần dưới cùng của hình ảnh không quá tối dưới chú thích.
Bạn có thể sử dụng bất kỳ loại chuyển màu nào được hỗ trợ và sáng tạo tuỳ thích. Ví dụ tiếp theo sau đây sử dụng hiệu ứng chuyển màu dạng hình tròn để tạo mặt nạ hình tròn nhằm chiếu sáng phía sau chú thích.
Sử dụng nhiều mặt nạ
Tương tự như với hình nền, bạn có thể chỉ định nhiều nguồn mặt nạ, hãy kết hợp chúng để có được hiệu ứng mong muốn. Điều này đặc biệt hữu ích nếu bạn muốn sử dụng mẫu được tạo bằng độ dốc CSS làm mặt nạ. Các định dạng này thường sử dụng nhiều hình nền và có thể dễ dàng được dịch thành mặt nạ.
Ví dụ: tôi tìm thấy một mẫu bàn cờ đẹp mắt trong bài viết này. Sử dụng hình nền, mã có dạng như sau:
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Để biến hình này hoặc bất kỳ mẫu nào khác được thiết kế cho hình nền thành mặt nạ,
bạn sẽ cần thay thế các thuộc tính background-* bằng các thuộc tính mask có liên quan,
bao gồm cả các tiền tố -webkit.
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
Có một số hiệu ứng rất đẹp mắt được tạo bằng cách áp dụng các mẫu chuyển màu cho hình ảnh. Hãy thử phối lại Glitch và thử nghiệm một số biến thể khác.
Cùng với việc cắt đoạn, Mặt nạ CSS là một cách để thêm sự hấp dẫn vào hình ảnh và các phần tử HTML khác mà không cần sử dụng ứng dụng đồ họa.
Ảnh chụp của Julio Rionaldo trên Unsplash.