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

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 hiệu ứng chuyển màu làm mặt nạ để tạo hiệu ứng thú vị mà không cần trình chỉnh sửa hình ảnh.

Rachel Andrew

Khi bạn cắt một phần tử bằng thuộc tính clip-path, vùng bị 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, 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 độ dốc.

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 che giấu CSS chuẩn. Bạn cần sử dụng tiền tố -webkit- ngoà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 thông tin đầy đủ về khả năng hỗ trợ trình duyệt.

Mặc dù việc hỗ trợ trình duyệt bằng cách sử dụng thuộc tính có tiền tố là tốt, nhưng khi sử dụng tính năng che để hiển thị văn bản trên đầu hình ảnh, hãy chú ý đến những gì sẽ xảy ra nếu không có tính năng che. Bạn nên sử dụng truy vấn tính năng để phát hiện khả năng hỗ trợ mask-image hoặc -webkit-mask-image và cung cấp phương án dự phòng có thể đọc được trước khi thêm phiên bản bị che.

@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 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ầ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 Glitch 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 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.

Trong ví dụ này, tôi 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. 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ư 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.

Che 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 để 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.

<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, chứ 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, không phải là chúng ta không thể làm gì được. Đối với trường hợp phổ biến nhất là tạo mặt nạ cho hình ảnh, chúng ta có thể đưa hình ảnh đó vào SVG.

Che phủ bằng hiệu ứng chuyển màu

Việ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ạo vùng được che mà không cần phải tạo hình ảnh hoặc SVG.

Ví dụ: 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 sẽ 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.

Sử dụng 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ụ: tôi đã tìm thấy một mẫu bàn cờ đẹp 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 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 thử phối lại Glitch và thử nghiệm một số biến thể khác.

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ạ.

Ảnh chụp của Julio Rionaldo trên Unsplash.