คุณสมบัติ backdrop-filter CSS

định nghĩa và cách sử dụng

backdrop-filter thuộc tính này được sử dụng để áp dụng hiệu ứng đồ họa cho khu vực đằng sau phần tử.

lưu ý:Để thấy hiệu ứng, phần tử hoặc nền của nó phải có ít nhất một phần trong suốt.

ví dụ

thêm hiệu ứng đồ họa cho khu vực đằng sau phần tử:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

thử nghiệm ngay

cú pháp CSS

backdrop-filter: none|filter|initial|inherit;

giá trị thuộc tính

giá trị mô tả
none giá trị mặc định. không áp dụng bất kỳ bộ lọc nào cho nền.
filter

danh sách các hàm lọc được phân tách bằng khoảng trống, ví dụ:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

hoặc chỉ định URL của bộ lọc SVG.

initial đặt thuộc tính này về giá trị mặc định. xem thêm initial.
inherit kế thừa thuộc tính này từ phần tử cha. xem thêm inherit.

chi tiết kỹ thuật

giá trị mặc định: none
kế thừa: không
tạo animation: hỗ trợ. xem thêm:thuộc tính liên quan đến animation.
phiên bản: CSS3
cú pháp JavaScript: object.style.backdropFilter="grayscale(100%)"

hỗ trợ trình duyệt

số liệu trong bảng đại diện cho phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

số liệu trước -webkit- đại diện cho phiên bản đầu tiên hỗ trợ tiền tố này.

Chrome Edge Firefox Safari Opera
76 79 103 9 -webkit- 63

trang liên quan

hướng dẫn:CSS รูปภาพ

tham khảo:CSS รายการfilter

tham khảo:HTML DOM filter thuộc tính