backdrop-filter用法示例

洪七公

简单的说，backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

1. /* 关键词值 */
   
2. backdrop-filter: none;
   
3. 
   
4. /* 指向 SVG 滤镜的 URL */
   
5. backdrop-filter: url(commonfilters.svg#filter);
   
6. 
   
7. /* <filter-function> 滤镜函数值 */
   
8. backdrop-filter: blur(2px);
   
9. backdrop-filter: brightness(60%);
   
10. backdrop-filter: contrast(40%);
    
11. backdrop-filter: drop-shadow(4px 4px 10px blue);
    
12. backdrop-filter: grayscale(30%);
    
13. backdrop-filter: hue-rotate(120deg);
    
14. backdrop-filter: invert(70%);
    
15. backdrop-filter: opacity(20%);
    
16. backdrop-filter: sepia(90%);
    
17. backdrop-filter: saturate(80%);
    
18. 
    
19. /* 多重滤镜 */
    
20. backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
    
21. 
    
22. /* 全局值 */
    
23. backdrop-filter: inherit;
    
24. backdrop-filter: initial;
    
25. backdrop-filter: revert;
    
26. backdrop-filter: unset;
    

复制代码

语法
值
none
没有应用于背景的滤镜。

<filter-function-list>

一个以空格分隔的滤镜函数（<filter-function>）或是要应用到背景上的 SVG 滤镜。

形式化定义

初始值        none

适用元素        all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements

初始值        none

适用元素        all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements

是否是继承属性        否

计算值        as specified

Animation type        a filter function list

形式化语法

1. backdrop-filter =
   
2.   none                 |
   
3.   <filter-value-list>  
   
4. 
   
5. <filter-value-list> =
   
6.   [ <filter-function> | <url> ]+  
   
7. 
   
8. <filter-function> =
   
9.   <blur()>         |
   
10.   <brightness()>   |
    
11.   <contrast()>     |
    
12.   <drop-shadow()>  |
    
13.   <grayscale()>    |
    
14.   <hue-rotate()>   |
    
15.   <invert()>       |
    
16.   <opacity()>      |
    
17.   <sepia()>        |
    
18.   <saturate()>     
    
19. 
    
20. <url> =
    
21.   url( <string> <url-modifier>* )  |
    
22.   src( <string> <url-modifier>* )  
    
23. 
    
24. <blur()> =
    
25.   blur( <length>? )  
    
26. 
    
27. <brightness()> =
    
28.   brightness( [ <number> | <percentage> ]? )  
    
29. 
    
30. <contrast()> =
    
31.   contrast( [ <number> | <percentage> ]? )  
    
32. 
    
33. <drop-shadow()> =
    
34.   drop-shadow( [ <color>? && <length>{2,3} ] )  
    
35. 
    
36. <grayscale()> =
    
37.   grayscale( [ <number> | <percentage> ]? )  
    
38. 
    
39. <hue-rotate()> =
    
40.   hue-rotate( [ <angle> | <zero> ]? )  
    
41. 
    
42. <invert()> =
    
43.   invert( [ <number> | <percentage> ]? )  
    
44. 
    
45. <opacity()> =
    
46.   opacity( [ <number> | <percentage> ]? )  
    
47. 
    
48. <sepia()> =
    
49.   sepia( [ <number> | <percentage> ]? )  
    
50. 
    
51. <saturate()> =
    
52.   saturate( [ <number> | <percentage> ]? )  

复制代码

示例

CSS

1. .box {
   
2.   background-color: rgba(255, 255, 255, 0.3);
   
3.   border-radius: 5px;
   
4.   font-family: sans-serif;
   
5.   text-align: center;
   
6.   line-height: 1;
   
7. -webkit-backdrop-filter: blur(10px);
   
8.   backdrop-filter: blur(10px);
   
9.   max-width: 50%;
   
10.   max-height: 50%;
    
11.   padding: 20px 40px;
    
12. }
    
13. 
    
14. html,
    
15. body {
    
16.   height: 100%;
    
17.   width: 100%;
    
18. }
    
19. 
    
20. body {
    
21.   background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
    
22.   background-position: center center;
    
23.   background-repeat: no-repeat;
    
24.   background-size: cover;
    
25. }
    
26. 
    
27. .container {
    
28.   align-items: center;
    
29.   display: flex;
    
30.   justify-content: center;
    
31.   height: 100%;
    
32.   width: 100%;
    
33. }
    

复制代码

HTML

1. <div class="container">
   
2.   <div class="box">
   
3.     <p>backdrop-filter: blur(10px)</p>
   
4.   </div>
   
5. </div>
   

复制代码