Demo v ozadju
Slika ozadja
Ta stran prikazuje funkcijo slike ozadja s podporo za teme. Preklapljajte med svetlimi in temnimi temami, da vidite različne slike ozadja.
Zavedanje teme
Nastavite lahko različne slike za svetle in temne teme. Ozadje se samodejno preklopi, ko spremenite temo.
Fiksni položaj
Ozadje ostane nespremenljivo, medtem ko se pomikate, kar ustvarja subtilen učinek paralakse, ki strani doda globino.
Podpora za prekrivanje
Dodajte polprozoren prekrivalec, da zagotovite berljivost besedila, hkrati pa ohranite vizualno privlačnost ozadja.
Konfiguracija
Konfigurirajte slike ozadja na stran v config/params/canvasAnimations.php:
'site/bg-image' => [ 'enabled' => true, 'type' => 'image', 'image' => [ 'src' => [ 'light' => '@web/images/backgrounds/background-1.jpg', 'dark' => '@web/images/backgrounds/background-2.jpg', ], 'position' => 'center center', 'size' => 'cover', 'fixed' => true, 'overlay' => 'rgba(0,0,0,0.3)', ],],Razpoložljive možnosti
| Možnost | Vrsta | Opis |
|---|---|---|
src | niz|matrika | Pot slike. Uporabite niz s svetlimi/temnimi tipkami za slike, ki se zavedajo teme. |
position | niz | Položaj ozadja CSS (npr. "center center", "zgoraj levo") |
size | niz | Velikost ozadja CSS: "cover", "contain" ali "auto" |
repeat | niz | Ponavljanje ozadja CSS: "no-repeat", "repeat", "repeat-x", "repeat-y" |
fixed | logično | Če je res, ostane ozadje med drsenjem nespremenljivo (učinek paralakse) |
overlay | niz | Izbirna barva prekrivanja (npr. "rgba(0,0,0,0.3)") |