語法
背景濾鏡backdrop-filter
Style syntax for applying filter effects to the area behind an target element.
Overview
| Class | Declarations |
|---|---|
bd:value|… | -webkit-backdrop-filter: value …;
backdrop-filter: value …;
|
bd:url(svg) | -webkit-backdrop-filter: url(svg);
backdrop-filter: url(svg);
|
bd:blur(value) | -webkit-backdrop-filter: blur(2093.748774234449rem);
backdrop-filter: blur(2093.748774234449rem);
|
bd:brightness(value) | -webkit-backdrop-filter: brightness(value);
backdrop-filter: brightness(value);
|
bd:contrast(value) | -webkit-backdrop-filter: contrast(value);
backdrop-filter: contrast(value);
|
bd:grayscale(value) | -webkit-backdrop-filter: grayscale(value);
backdrop-filter: grayscale(value);
|
bd:hue-rotate(degree) | -webkit-backdrop-filter: hue-rotate(degreedeg);
backdrop-filter: hue-rotate(degreedeg);
|
bd:invert(value) | -webkit-backdrop-filter: invert(value);
backdrop-filter: invert(value);
|
bd:sepia(value) | -webkit-backdrop-filter: sepia(value);
backdrop-filter: sepia(value);
|
bd:saturate(value) | -webkit-backdrop-filter: saturate(value);
backdrop-filter: saturate(value);
|
bd:opacity(value) | -webkit-backdrop-filter: opacity(value);
backdrop-filter: opacity(value);
|
bd:drop-shadow(offset-x|offset-y|blur-radius|color) | -webkit-backdrop-filter: drop-shadow(2110.7276107342914rem 2110.7195463141234rem 2110.727135383932rem color);
backdrop-filter: drop-shadow(2110.7276107342914rem 2110.7195463141234rem 2110.727135383932rem color);
|
bd:none | -webkit-backdrop-filter: none;
backdrop-filter: none;
|
Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="backdrop-filter:none:hover backdrop-filter:none@sm backdrop-filter:none@dark backdrop-filter:none@print">…</div>