Tính năng làm mờ và dịch chuyển màu phía sau một phần tử.
Trước đây, những kỹ thuật này rất khó triển khai trên web, đòi hỏi hình thức tấn công hoặc cách giải quyết không hoàn hảo. Trong những năm gần đây, cả Safari và Edge đều cung cấp những chức năng này thông qua thuộc tính background-filter (và thuộc tính -webkit-backdrop-filter). Thuộc tính này sẽ tự động kết hợp màu nền trước và màu nền dựa trên các chức năng lọc. Chrome hiện đã hỗ trợ background-filter, kể từ phiên bản 76.
backdrop-filter. Hãy thử ví dụ trên CodePen.
Hỗ trợ trình duyệt
Vì lý do 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;
}
}
Kiến thức 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ử, làm thay đổi giao diện của mọi nội dung phía sau phần tử đó. - Phần tử lớp phủ ít nhất phải trong suốt một phần.
- 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 phần tử trong suốt hoặc trong suốt. Để hiểu được điều này, hãy xem xét những 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 hiển thị các phần tử chồng chéo nếu backdrop-filter không được sử dụng hoặc hỗ trợ. Hình ảnh bên phải áp dụng hiệu ứng làm mờ bằng backdrop-filter. Xin lưu ý rằng hàm này sử dụng opacity ngoài backdrop-filter. Nếu không có opacity, thì hệ thống sẽ không áp dụng tính năng làm mờ. Hầu như không cần phải biết rằng nếu opacity được đặt thành 1 (mờ hoàn toàn) thì sẽ không có ảnh hưởng nào đến nền.
Thuộc tính backdrop-filter giống như bộ lọc CSS ở chỗ tất cả các hàm lọc bạn yêu thích đều được hỗ trợ: blur(), brightness(), contrast(), opacity(), drop-shadow(), v.v. Mã 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 cả 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 thành phần con có vị trí tuyệt đối và cố định.
Bạn có thể kết hợp các bộ lọc để tạo ra hiệu ứng phong phú và khéo léo, hoặc chỉ dùng một bộ lọc để tạo hiệu ứng tinh tế hoặc chính xác hơn. Bạn thậm chí có thể kết hợp các tệp đó bằng 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 các hệ điều hành giờ đây đã hoạt động hiệu quả và có thể đạt được chỉ với một nội dung khai báo CSS. Hãy cùng xem xét một số ví dụ.
Một bộ lọc
Trong ví dụ sau, hiệu ứng mờ tạo được bằng cách kết hợp màu sắc và hiệu ứng làm mờ. Độ mờ là do backdrop-filter cung cấp, trong khi màu sắc lấy 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 sử dụng nhiều bộ lọc để đạt được hiệu quả mong muốn. Để làm việc này, hãy cung cấp một danh sách các bộ lọc được phân tách bằng một không gian. 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 ảnh độ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 có thể đọc được trong khi phối theo phong cách 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ư đã đề cập 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 trên web. Một ví dụ cho trường hợp này là 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ể những gì đang diễn ra phía sau văn bản. Phép 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 dùng đã tán thành lỗi Chromium trong vài năm qua, đánh dấu rõ ràng đây là tính năng CSS được mong đợi từ lâu. Việc phát hành backdrop-filter ở phiên bản 76 của Chrome giúp môi trường web tiến gần hơn đến việc trình bày giao diện người dùng thực sự giống hệ điều hành.