Tạo mặt nạ CSS cho phép bạ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ể dùng hình ảnh, tệp SVG hoặc hiệu ứng chuyển màu 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 bị cắt sẽ không hiển thị.
Thay vào đó, 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, bạn cần sử dụng tính năng che.
Bài đăng này giải thích cách sử dụng thuộc tính mask-image trong CSS, cho phép bạn chỉ định một hình ảnh để dùng làm lớp mặt nạ.
Thao tác này cung cấp cho bạn 3 tuỳ chọn. Bạn có thể dùng tệp hình ảnh làm mặt nạ, tệp SVG hoặc hiệu ứng 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 thuộc tính che giấu CSS chuẩn.
Bạn sẽ cần dùng tiền tố -webkit- ngoài thuộc tính chuẩn để đảm bảo khả năng tương thích tốt nhất với trình duyệt.
Xem bài viết Tôi có thể sử dụng mặt nạ CSS không? để biết thông tin hỗ trợ đầy đủ về trình duyệt.
Mặc dù trình duyệt sử dụng thuộc tính có tiền tố là tốt, nhưng khi sử dụng tính năng tạo mặt nạ để hiển thị văn bản ở đầu hình ảnh, hãy chú ý đến những gì sẽ xảy ra nếu không có mặt nạ.
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 một bản dự phòng dễ đọc trước khi thêm phiên bản có mặt nạ.
@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.
Sử dụng giá trị url() để truyền vào một hình ảnh.
Hình ảnh mặt nạ của bạn cần có vùng trong suốt hoặc bán trong suốt.
Một vùng hoàn toàn trong suốt sẽ làm cho phần hình ảnh nằm dưới vùng đó bị ẩn. Tuy nhiên, việc sử dụng một vùng bán trong suốt sẽ cho phép một số hình ảnh gốc xuyên qua. Bạn có thể thấy sự khác biệt trong Nhiễu sóng dưới đây. Hình ảnh đầu tiên là ảnh chụp bóng bay không có mặt nạ. Hình ảnh thứ hai áp dụng một mặt nạ có một ngôi sao 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 đang sử dụng thuộc tính mask-size có giá trị cover.
Thuộc tính này hoạt động theo cách tương tự 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 bất kỳ đơn vị độ dài hợp lệ nào hoặc tỷ lệ phần trăm.
Bạn cũng có thể lặp lại mặt nạ giống như 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.
Lý do đầu tiên là có 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à bạn có thể áp dụng mặt nạ cho bất kỳ phần tử HTML nào, không chỉ cho 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, tất cả đều không bị mất. Tuy nhiên, đối với trường hợp phổ biến nhất là che hình ảnh, chúng ta có thể đưa hình ảnh đó vào SVG.
Tạo mặt nạ có độ dốc
Sử dụng hiệu ứng chuyển màu CSS làm mặt nạ là một cách tinh tế để đạt được một vùng được che giấu mà không cần gặp phải rắc rối khi tạo hình ảnh hoặc SVG.
Một hiệu ứng 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 bên 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 như bạn muốn. Ví dụ tiếp theo 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 phát sáng phía sau phụ đề.
Sử dụng nhiều mặt nạ
Tương tự như hình nền, bạn có thể chỉ định nhiều nguồn mặt nạ, kết hợp các nguồn đó để 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ạ. Những quảng cáo này thường sử dụng nhiều hình nền và có thể được chuyển đổi dễ dàng thành một 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. Mã (sử dụng hình nền) sẽ 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 mẫu 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 mặt nạ, bạn 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 thuộc tính 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 thực sự thú vị được tạo ra 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 Nhiễu sọc và thử nghiệm một số biến thể khác.
Ngoài tính năng cắt đoạn, mặt nạ CSS là một cách để thêm mối quan tâm 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 đồ hoạ.
Ảnh chụp của Julio Rionaldo trên Unsplash.