Hiệu ứ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 và đòi hỏi phải có những cách tấn công hoặc 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 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. 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 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ụ bên dưới 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ử lớp 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 hiển thị các phần tử chồng chéo nếu backdrop-filter không được sử dụng hoặc không đượ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 thành phần này còn sử dụng opacity bên cạnh backdrop-filter. Nếu không có opacity, bạn sẽ không thể 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ả các chức năng bộ lọc yêu thích của bạn đề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 thành phần con cháu 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ờ. Hiệu ứng làm mờ do backdrop-filter cung cấp, còn màu 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. Để 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 các bộ lọc phông nền khác nhau, trong khi một nhóm hình dạng tương tự được tạo hiệu ứng động phía sau.
Lớp phủ
Ví dụ này cho biết cách làm mờ nền bán trong suốt để có thể đọc được văn bản trong khi phối hợp 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 về 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. Công cụ 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ố các bạn đã tán thành lỗi Chromium trong vài năm qua và đánh dấu rõ ràng đây là tính năng CSS mà bạn mong đợi từ lâu. Việc Chrome phát hành backdrop-filter trong phiên bản 76 đưa web đến một bước gần hơn với việc trình bày giao diện người dùng thực sự giống với hệ điều hành.