Nội dung có kết cấu trực quan

Tổng quan

Để áp dụng các mẫu hoạ tiết hoặc hiệu ứng thời tiết chân thực (như hoạ tiết bụi bẩn, nhiễu hạt hoặc giấy) cho một phần tử, hãy sử dụng tính năng Tạo mặt nạ CSS (mask-image) với hình ảnh hoạ tiết lặp lại. Điều này cho phép bạn làm cho nội dung có kết cấu bằng cách làm cho các phần của nội dung trở nên bán trong suốt, thay vì chỉ phủ một kết cấu lên trên. Điều này giúp tạo ra hình ảnh chân thực hơn về chất liệu vật lý.

Triển khai

Cách áp dụng mẫu hoạ tiết:

Phương pháp 1: Sử dụng hình ảnh đường quét lặp lại (Nên dùng cho kết cấu chân thực)

Đây là phương pháp phổ biến nhất để tạo hoạ tiết chân thực.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

Phương thức 2: Sử dụng dải chuyển màu CSS cho các mẫu hình học

Bạn có thể tạo mẫu bằng dải màu CSS. Đây là tệp độc lập và không cần tệp hình ảnh bên ngoài.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

Chế độ mặt nạ Alpha so với chế độ mặt nạ Luminance

Theo mặc định, mặt nạ CSS sử dụng mask-mode: match-source. Điều này có nghĩa là trình duyệt sẽ tự động quyết định xem có sử dụng kênh alpha (độ trong suốt) hay độ sáng (độ sáng) của mặt nạ hay không dựa trên loại nguồn mà bạn cung cấp:

Chiến lược dự phòng

Nếu trình duyệt không hỗ trợ mask-image hoặc phiên bản có tiền tố:

• Phần tử sẽ hiển thị mà không có kết cấu (màu tô rõ ràng và đồng nhất).
• Đảm bảo nội dung vẫn có thể đọc được mà không cần kết cấu (cải tiến tăng dần).
• Bạn có thể sử dụng hình nền hoặc lớp phủ làm phương án dự phòng để mô phỏng kết cấu, mặc dù điều này sẽ không ảnh hưởng đến độ trong suốt của chính nội dung.

/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}