Áp dụng hiệu ứng cho hình ảnh bằng thuộc tính mask-image của CSS

Tính năng che bằng 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ể sử dụng hình ảnh, 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 được cắt sẽ không hiển thị. Nếu muốn làm mờ một phần hình ảnh hoặc áp dụng một số hiệu ứng khác cho hình ảnh, 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 để sử dụng làm lớp mặt nạ. Bạn có 3 lựa chọn sau. Bạn có thể sử dụng tệp hình ảnh làm mặt nạ, SVG hoặc độ dốc.

Khả năng tương thích với trình duyệt

Mặc dù tính năng che bằng CSS là mới có trong Đường cơ sở, nhưng hầu hết các tính năng của mask-image đều có trong các phiên bản trình duyệt cũ hơn bằng cách sử dụng tiền tố -webkit-mask-image. Các ví dụ sau đây cho thấy cách sử dụng cả hai thuộc tính cùng nhau để có được khả năng hỗ trợ trình duyệt tốt nhất.

Mặt nạ bằng hình ảnh

Thuộc tính mask-image hoạt động tương tự như thuộc tính background-image. Sử dụng giá trị url() để truyền hình ảnh. Hình ảnh mặt nạ cần có một vùng trong suốt hoặc bán trong suốt.

Một vùng hoàn toàn trong suốt sẽ khiến phần hình ảnh nằm trong vùng đó không hiển thị. 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 hiển thị xuyên qua. Bạn có thể thấy sự khác biệt trong CodePen sau.

  • Hình ảnh đầu tiên là hình ảnh gốc của quả bóng bay không có mặt nạ.
  • Hình ảnh thứ hai có một mặt nạ được áp dụng, trong đó 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 có độ trong suốt chuyển màu.

Ví dụ này cũng sử dụng thuộc tính mask-size với giá trị là cover. Thuộc tính này hoạt động giống như background-size. Sử dụng từ khoá covercontain hoặc đặt kích thước cho nền bằng bất kỳ đơn vị chiều 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ư cách 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.

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ể sử dụng SVG. Có một số cách để thực hiện việc này. Cách đầu tiên là có một phần tử <mask> bên trong SVG và tham chiếu mã nhận dạng của phần tử đó trong thuộc tính mask-image.

.container img {
  -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, chứ không chỉ hình ảnh.

Đối với trường hợp phổ biến nhất khi tạo mặt nạ cho hình ảnh, bạn có thể đưa hình ảnh đó vào SVG. Phương pháp đầu tiên là Đường cơ sở mới có sẵn, bao gồm cả hình ảnh trong SVG được các trình duyệt cũ hỗ trợ phiên bản có tiền tố -webkit.

Mặt nạ có hiệu ứng chuyển màu

Sử dụng hiệu ứng chuyển màu CSS làm mặt nạ là một cách tinh tế để tạo vùng được che mà không cần phải tạo hình ảnh hoặc SVG.

Ví dụ: hiệu ứng chuyển màu tuyến tính đượ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 theo ý mình. Ví dụ tiếp theo này sử dụng hiệu ứng chuyển màu hình tròn để tạo một mặt nạ hình tròn chiếu sáng phía sau chú thích.

Nhiều mặt nạ

Cũng 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 mà bạn muốn. Điều này đặc biệt hữu ích nếu bạn muốn sử dụng một mẫu được tạo bằng hiệu ứng chuyển màu CSS làm mặt nạ. Các lớp phủ này thường sử dụng nhiều hình nền và do đó có thể dễ dàng được chuyển đổi thành mặt nạ.

Ví dụ: có một mẫu ô trong các mẫu có độ dốc CSS 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 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;

Bạn có thể tạo một số hiệu ứng rất đẹp bằng cách áp dụng các mẫu chuyển màu cho hình ảnh. Hãy kiểm thử một số biến thể khác bằng cách phân nhánh CodePen sau.

Cùng với tính năng cắt, mặt nạ CSS là một cách để tăng thêm sự hấp dẫn cho hình ảnh và các phần tử HTML khác mà không cần sử dụng ứng dụng đồ hoạ.