Thuộc tính bộ lọc phông nền CSS
Ví dụ
Thêm hiệu ứng đồ họa vào khu vực phía sau một phần tử:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính backdrop-filter
được sử dụng để áp dụng hiệu ứng đồ họa cho khu vực phía sau một phần tử.
Mẹo: Để xem hiệu ứng, phần tử hoặc nền của nó ít nhất phải trong suốt một phần.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.backdropFilter="grayscale(100%)" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
backdrop-filter | 76.0 | 17.0 | 70.0* | 9.0 -webkit- | 63.0 |
* Để làm việc này, hãy mở about:config và đặt thelayout.css.backdrop-filter.enabled thành true, đồng thời cũng cần đặt tùy chọn gfx.webrender.all thành true.
Cú pháp CSS
backdrop-filter:
none| filter |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
none | Default value. No filter is applied to the backdrop | Demo ❯ |
filter | A space-separated list of filter-functions like:
or an url to an SVG filter that will be applied to the backdrop |
Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Trang liên quan
Tham khảo CSS: thuộc tính bộ lọc
Hướng dẫn CSS: Hình ảnh CSS
Tham chiếu DOM HTML: thuộc tính bộ lọc