Backdrop Grayscale
Terapkan skala kelabu pada latar belakang
Sintaks
visual="backdrop-grayscale:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
none | backdrop-filter: grayscale(0%) | Tiada skala kelabu |
partial | backdrop-filter: grayscale(50%) | 50% skala kelabu |
full | backdrop-filter: grayscale(100%) | Skala kelabu penuh |
Contoh
html
<div visual="backdrop-grayscale:full">Grayscale backdrop</div>Pratonton
Skala Kelabu Latar Belakang
visual="backdrop-grayscale:full" - Alih keluar warna dari latar belakang, mencipta kesan tidak tepu
Original
Grayscale
Lihat Kod
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
<div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 filter-grayscale:full rounded:small text:white">Grayscale</div>
</div>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div visual="backdrop:[custom-value]">Custom</div>