Hiệu ứng làm mờ và dịch chuyển màu phía sau một phần tử.
Độ mờ, làm mờ và các hiệu ứng khác là những cách hữu ích để tạo chiều sâu mà vẫn giữ được bối cảnh của nội dung nền. Chúng hỗ trợ nhiều trường hợp sử dụng như kính mờ, lớp phủ video, tiêu đề điều hướng rõ, kiểm duyệt hình ảnh không phù hợp, tải hình ảnh, v.v. Bạn có thể nhận ra các hiệu ứng này từ hai hệ điều hành phổ biến là Windows 10 và iOS.
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.
.frosty-glass-pane { backdrop-filter: blur(2px); }
.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ự.