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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
backdrop-filterChrome Full support 76
Full support 76
Full support 47
Disabled
Disabled From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 17Firefox Full support 70
Disabled
Full support 70
Disabled
Disabled From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 34
Disabled
Full support 34
Disabled
Disabled From version 34: this feature is behind the Enable Experimental Web Platform Features preference.
Safari Full support 9
Prefixed
Full support 9
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 76Chrome Android Full support 76
Full support 76
Full support 47
Disabled
Disabled From version 47: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1178765.
Opera Android Full support 54
Full support 54
Full support 34
Disabled
Disabled From version 34: this feature is behind the Enable Experimental Web Platform Features preference.
Safari iOS Full support 9
Prefixed
Full support 9
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Xem thêm