60. Masking Trong CSS

Masking trong CSS: masking (lớp mặt nạ) cho phép bạn ẩn đi một phần hoặc hiển thị một phần của một phần tử dựa trên một hình dạng hoặc một hình ảnh mặt nạ. Điều này giúp tạo ra các hiệu ứng kiểm soát vùng hiển thị của nội dung. Để thực hiện masking, bạn sử dụng các thuộc tính như mask-image, mask-position, mask-size, và nhiều thuộc tính khác. Dưới đây là một ví dụ về cách sử dụng masking trong CSS:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .masked-container {
      width: 300px;
      height: 200px;
      overflow: hidden;
    }

    .masked-image {
      width: 100%;
      height: 100%;
      mask-image: url('mask-image.png');
      mask-position: center;
      mask-size: cover;
    }
  </style>
</head>
<body>
  <div class="masked-container">
    <img class="masked-image" src="your-image.jpg" alt="Masked Image">
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng phần tử .masked-container để giới hạn kích thước và vùng hiển thị của hình ảnh.
Sử dụng CSS overflow: hidden; để ẩn đi bất kỳ phần nào của hình ảnh mà vượt ra ngoài kích thước phần tử cha.
Sử dụng mask-image: url('mask-image.png'); để áp dụng hình ảnh mặt nạ. Nội dung của phần tử .masked-image sẽ được hiển thị dựa trên hình dạng của hình ảnh mặt nạ.
Sử dụng mask-position: center; và mask-size: cover; để điều chỉnh vị trí và kích thước của hình ảnh mặt nạ để nó phù hợp với kích thước của phần tử.

Lưu ý rằng hình ảnh mặt nạ có thể là một hình dạng đơn giản hoặc một hình ảnh phức tạp hơn, tùy thuộc vào thiết kế và hiệu ứng bạn muốn tạo ra.

Leave a Comment Cancel Reply