files/zh-cn/web/css/backdrop-filter/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

---
title: backdrop-filter
slug: Web/CSS/backdrop-filter
tags:
  - CSS
  - CSS Property
  - Graphics
  - Layout
  - SVG
  - SVG Filter
  - Web
  - 滤镜
translation_of: Web/CSS/backdrop-filter
---
<div>{{CSSRef}}</div>

<p><strong><code>backdrop-filter</code></strong> <a href="/zh-CN/docs/Web/CSS">CSS</a> 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素<em>背后</em>的所有元素，为了看到效果，必须使元素或其背景至少部分透明。</p>

<pre class="brush: css no-line-numbers">/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* &lt;filter-function&gt; 滤镜函数值 */
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%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="语法">语法</h2>

<h3 id="值">值</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>没有应用于背景的滤镜</dd>
 <dt><code>&lt;filter-function-list&gt;</code></dt>
 <dd>一个以空格分隔的滤镜函数（{{cssxref("&lt;filter-function&gt;")}}）或是要应用到背景上的 <a href="/zh-CN/docs/Web/SVG/Element/filter">SVG 滤镜</a>。</dd>
</dl>

<h3 id="形式化语法">形式化语法</h3>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="CSS">CSS</h3>

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

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

body {
  background-image: url('https://lorempixel.com/400/200/');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="container"&gt;
  &lt;div class="box"&gt;
    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample("Example", 600, 400)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
   <td>{{Spec2('Filters 2.0')}}</td>
   <td>初始版本。</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("css.properties.backdrop-filter")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{cssxref("filter")}}</li>
 <li><a href="http://www.domneill.com/blog/posts/2015/07/28/my-favourite-new-features-in-webkit-and-safari/">一篇由 Dom Neill 提供的、包含示例的博文</a></li>
 <li><a href="https://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">使用 backdrop-filter 构建类似于 iOS 的透明效果</a></li>
</ul>