Background Image
Tetapkan imej latar atau gradien
Sintaks
visual="bg-image:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
none | background-image: none | Tiada imej latar |
gradient-to-t | background-image: linear-gradient(to top, var(--tw-gradient-stops)) | Gradien ke atas |
gradient-to-b | background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) | Gradien ke bawah |
gradient-to-l | background-image: linear-gradient(to left, var(--tw-gradient-stops)) | Gradien ke kiri |
gradient-to-r | background-image: linear-gradient(to right, var(--tw-gradient-stops)) | Gradien ke kanan |
Contoh
html
<div visual="bg-image:gradient-to-r">Gradient background</div>Pratonton
Gradien Latar
visual="bg-image:gradient-to-r" - Terapkan latar gradien
gradient-to-r
gradient-to-b
Lihat Kod
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:violet-500 text:white rounded:small">gradient-to-r</div>
<div space="p:medium" visual="bg-image:gradient-to-b from:emerald-500 to:blue-500 text:white rounded:small">gradient-to-b</div>
</div>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div visual="background:[custom-value]">Custom</div>