backdrop-filter

Thuộc tính CSS backdrop-filter cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho vùng phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để xem hiệu ứng, bạn phải làm cho phần tử hoặc nền của nó ít nhất một phần trong suốt.

/* Giá trị từ khóa */
backdrop-filter: none;

/* Bộ lọc URL đến SVG */
backdrop-filter: url(commonfilters.svg#filter);

/* Giá trị <filter-function> */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Nhiều bộ lọc */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Giá trị chung */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;

Cú pháp

Giá trị

none
Không có bộ lọc nào được áp dụng cho phông nền.
<filter-function-list>
Danh sách được phân tách bằng dấu cách về <filter-function>s hoặc một bộ lọc SVG sẽ được áp dụng cho phông nền.

Định nghĩa hình thức

Initial valuenone
Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
Inheritedno
Computed valueas specified
Animation typea filter function list

Cấu trúc hình thức

none | <filter-function-list>

where
<filter-function-list> = [ <filter-function> | <url> ]+

where
<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>

where
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )

where
<number-percentage> = <number> | <percentage>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Ví dụ

CSS

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
 -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

Kết quả

Thông số kỹ thuật

Specification Status Comment
Filter Effects Module Level 2
The definition of 'backdrop-filter' in that specification.
Editor's Draft Định nghĩa ban đầu.

Tính tương thích của trình duyệt web

BCD tables only load in the browser

Xem thêm