Làm mờ nội dung ở cạnh mềm

Tính năng web: Mặt nạ

Tổng quan

Để áp dụng hiệu ứng chuyển màu trong suốt cho các cạnh của vùng chứa (ví dụ: để cho biết có thêm nội dung để cuộn hoặc làm mờ văn bản), hãy sử dụng tính năng Tạo mặt nạ CSS với hiệu ứng chuyển màu tuyến tính. Phương pháp này hiệu quả hơn so với việc sử dụng lớp phủ bán trong suốt vì nó thực sự làm mờ nội dung, cho phép nền hiển thị một cách tự nhiên mà không ảnh hưởng đến việc chọn văn bản hoặc sự kiện con trỏ.

Triển khai

Cách triển khai hiệu ứng mờ dần ở cạnh mềm:

Làm mờ cạnh dưới của vùng chứa

Điều này giúp cho biết rằng có nhiều nội dung hơn ở bên dưới trong một khu vực có thể cuộn.

.container {
  /* Enable scrolling */
  overflow-y: auto;
  
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  
  /* Standard property for modern browsers */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

Làm mờ cả cạnh trên và cạnh dưới

Bạn có thể sử dụng một dải chuyển màu duy nhất có nhiều điểm dừng màu để làm mờ cả hai cạnh.

.dual-fade-container {
  /* Content is visible between 10% and 90% of the height */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

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ố:

  • Nội dung sẽ không bị mờ và sẽ hiển thị với các cạnh sắc nét.
  • Đảm bảo giao diện vẫn hoạt động và nội dung vẫn đọc được mà không có hiệu ứng mờ dần (cải tiến tăng dần).
  • Bạn có thể sử dụng lớp phủ bán trong suốt làm phương án dự phòng, nhưng xin lưu ý rằng bạn cần biết màu nền và lớp phủ này có thể ảnh hưởng đến việc chọn văn bản, trừ phi bạn sử dụng pointer-events: none.
/* Fallback using an overlay for browsers that do not support masking */
@supports (not (mask-image: linear-gradient(to bottom, black, transparent))) and (not (-webkit-mask-image: linear-gradient(to bottom, black, transparent))) {
  .container {
    position: relative;
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    /* Fallback assumes a solid background color (e.g., white) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow interaction with text underneath */
  }
}