CSS backdrop-filterプロパティ
例
要素の後ろの領域にグラフィック効果を追加します:
.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;
}
試してみる »
ブラウザサポート
表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。
-webkit-、-ms-、または -moz- の直前にある数字は、その接頭辞付きプロパティをサポートする最初のブラウザバージョンを示します。
| プロパティ | |||||
|---|---|---|---|---|---|
| backdrop-filter | 76 | 17 | 103 | 9.0 -webkit- |
63 |
タグの定義と使用説明
backdrop-filter CSS プロパティを使用すると、要素の後ろの領域にグラフィック効果（ぼかしや色の偏移など）を追加できます。
これは要素の背後にあるすべての要素に適用されるため、効果を確認するには、要素またはその背景を少なくとも部分的に透明にする必要があります。
構文
backdrop-filter: <filter-function-list>
| 值 | 説明 |
|---|---|
| none | 背景に適用されるフィルターはありません。 |
| <filter-function-list> | スペースで区切られたフィルター関数（<filter-function>）、または背景に適用する SVG フィルター。 |
/* キーワード値 */
backdrop-filter: none;
/* SVG フィルターを指す URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <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%);
/* 複数のフィルター */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* グローバル値 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;
backdrop-filter: none;
/* SVG フィルターを指す URL */
backdrop-filter: url(commonfilters.svg#filter);
/* <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%);
/* 複数のフィルター */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
/* グローバル値 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;