Tạo nền kiểu hệ điều hành bằng bộ lọc phông nền

Hiệu ứng làm mờ và dịch chuyển màu phía sau một phần tử.

Adam Argyle

Joe Medley

Trước đây, những kỹ thuật này khó triển khai trên web, đòi hỏi phải có các bản hack hoặc giải pháp không hoàn hảo. Trong những năm gần đây, cả Safari và Edge đều cung cấp những tính năng này thông qua thuộc tính background-filter (và một cách khác là -webkit-backdrop-filter). Thuộc tính này tự động kết hợp màu nền trước và màu nền sau dựa trên chức năng bộ lọc. Giờ đây, Chrome hỗ trợ background-filter, bắt đầu từ phiên bản 76.

Hỗ trợ trình duyệt

Vì lý do về hiệu suất, hãy quay lại sử dụng hình ảnh thay vì polyfill khi backdrop-filter không được hỗ trợ. Ví dụ dưới đây cho thấy điều này.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

Thông tin cơ bản

• Thuộc tính backdrop-filter áp dụng một hoặc nhiều bộ lọc cho một phần tử, thay đổi giao diện của mọi nội dung phía sau phần tử đó.
• Phần tử phủ phải ít nhất phải có một phần trong suốt.
• Phần tử phủ sẽ nhận được ngữ cảnh xếp chồng mới.

CSS backdrop-filter áp dụng một hoặc nhiều hiệu ứng cho một phần tử trong suốt hoặc trong suốt. Để hiểu rõ điều này, hãy xem các hình ảnh dưới đây.

Không có nền trước trong suốt

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

Độ trong suốt của nền trước

.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

Hình ảnh bên trái cho thấy cách các phần tử chồng chéo sẽ được kết xuất nếu không sử dụng hoặc không hỗ trợ backdrop-filter. Hình ảnh bên phải áp dụng hiệu ứng làm mờ bằng backdrop-filter. Lưu ý rằng lớp này sử dụng opacity ngoài backdrop-filter. Nếu không có opacity, bạn sẽ không thể áp dụng hiệu ứng làm mờ. Hầu như là nếu bạn đặt opacity thành 1 (mờ hoàn toàn) thì sẽ không có hiệu ứng nào trong nền.

Thuộc tính backdrop-filter giống như bộ lọc CSS ở chỗ tất cả hàm bộ lọc mà bạn yêu thích đều được hỗ trợ: blur(), brightness(), contrast(), opacity(), drop-shadow(), v.v. Bộ lọc này cũng hỗ trợ hàm url() nếu bạn muốn sử dụng hình ảnh bên ngoài làm bộ lọc, cũng như các từ khoá none, inherit, initial và unset. Có phần giải thích cho toàn bộ nội dung này trên MDN, bao gồm nội dung mô tả về cú pháp, bộ lọc và giá trị.

Khi bạn đặt backdrop-filter thành bất kỳ giá trị nào khác ngoài none, trình duyệt sẽ tạo một ngữ cảnh xếp chồng mới. Bạn cũng có thể tạo một khối chứa, nhưng chỉ khi phần tử có các phần tử con ở vị trí tuyệt đối và cố định.

Bạn có thể kết hợp các bộ lọc để có hiệu ứng phong phú và thông minh hoặc chỉ sử dụng một bộ lọc để có hiệu ứng tinh tế hơn hoặc chính xác hơn. Bạn thậm chí có thể kết hợp chúng với bộ lọc SVG.

Ví dụ

Các kỹ thuật và kiểu thiết kế trước đây dành riêng cho hệ điều hành hiện đã hoạt động hiệu quả và có thể đạt được chỉ với một thao tác khai báo CSS. Hãy cùng xem xét một số ví dụ.

Bộ lọc đơn

Trong ví dụ sau, hiệu ứng làm mờ đạt được bằng cách kết hợp màu sắc và hiệu ứng làm mờ. backdrop-filter cung cấp hiệu ứng làm mờ, còn màu sắc đến từ màu nền bán trong suốt của phần tử.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}

Nhiều bộ lọc

Đôi khi, bạn cần nhiều bộ lọc để đạt được hiệu ứng mong muốn. Để thực hiện việc này, hãy cung cấp danh sách bộ lọc được phân tách bằng dấu cách. Ví dụ:

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

Trong ví dụ sau, mỗi ngăn trong số 4 ngăn có một tổ hợp bộ lọc phông nền khác nhau, trong khi cùng một nhóm hình dạng được tạo hiệu ứng động phía sau.

Lớp phủ

Ví dụ này cho thấy cách làm mờ nền bán trong suốt để văn bản dễ đọc trong khi vẫn kết hợp hài hòa với nền của trang.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Độ tương phản văn bản trên nền động

Như đã nêu trước đó, backdrop-filter cho phép các hiệu ứng hiệu suất khó hoặc không thể thực hiện được trên web. Ví dụ như việc thay đổi nền để phản hồi ảnh động. Trong ví dụ này, backdrop-filter duy trì độ tương phản cao giữa văn bản và nền bất kể văn bản đang diễn ra. Hàm này bắt đầu bằng màu nền mặc định darkslategray và sử dụng backdrop-filter để đảo ngược màu sau khi biến đổi.

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}

Kết luận

Hơn 560 người trong số bạn đã bỏ phiếu cho lỗi Chromium trong vài năm qua, rõ ràng đây là một tính năng CSS được chờ đợi từ lâu. Bản phát hành backdrop-filter của Chrome trong phiên bản 76 giúp web tiến gần hơn một bước đến việc trình bày giao diện người dùng giống hệ điều hành thực sự.

Tài nguyên khác

• Thông số kỹ thuật
• Trạng thái nền tảng Chrome
• MDN
• background-filter tại Thủ thuật CSS
• Mẫu trên Codepen