Uporaba CSS za nastavitev slike ozadja

• Maj 19, 2024

Se kdaj vprašate, kako spletna mesta upravljajo s čudovitimi dizajni in slikami, ki plavajo za besedilom? Vse se naredi s čari kaskadnih tabel. CSS vam ne omogoča le, da določite sliko za ozadje vaše strani, ampak vam omogoča tudi nastavitev, kako se slika prikazuje - tako da lahko dobite samo videz, ki ga želite.

Temeljni gradnik vaše slike v ozadju je, če je primerno, lastnost 'background-image'. To lastnost uporabite, da svojemu spletnemu mestu sporočite, kje se nahaja slikovna datoteka, kot sledi:

telo {
background-image: url ("image.gif");
}

To je vse, kar morate storiti, da postavite sliko za ozadje za svojo spletno stran. Seveda boste verjetno želeli prilagoditi, kako se slika prikazuje. Recimo, da želite, da se vaša slika začne na vrhu strani, vendar da je v sredini vodoravno namesto poravnana v levo (privzeta poravnava). V tem primeru boste v svoje pravilo CSS želeli dodati lastnost 'background-position':

telo {
background-image: url ("image.gif");
ozadje-položaj: srednji vrh;
}

Pri določitvi lastnosti 'pozicija pozicije' prva vrednost nastavi vodoravno poravnavo (levo, sredino ali desno), druga pa nastavi navpično poravnavo slike (zgoraj, sredino ali spodaj).

Nato se odločite, da želite preprečiti, da se slika horizontalno polaga (ponavlja), čeprav želite, da se ploščice navpično. Čas je, da razkrijete lastnost 'ponovitev ozadja':

telo {
background-image: url ("image.gif");
ozadje-položaj: srednji vrh;
ozadje-ponovite: ponovite-y;
}

Če nastavite vrednost na 'repeat-y', brskalnik pove, da mora slikovno podlago položiti vzdolž osi y, prav tako navpično, ne pa osi x (vodoravno), kar je točno tisto, kar smo želeli. Če bi ga želeli položiti vodoravno, ne pa navpično, bi namesto tega uporabili vrednost 'repeat-x'; če sploh niste želeli, da se slika ploščice, ji dodajte vrednost "brez ponovitve". Privzeta vrednost je, da sliko položite vodoravno in navpično, tako da, če je to najboljša izbira za vašo sliko, vam lastnosti ozadja za ponovitev ozadja sploh ni treba nastaviti.

Končno si lahko ogledate lastnost 'priloga v ozadju'. Vaša slika se bo privzeto pomaknila tako, da se stran pomika, tako da, če slike ne ponavljate navpično in imate dolgo stran, se njena slika ne bo razširila na dno strani. To lahko spremenite tako, da lastnost 'priloga v ozadju' nastavite na 'fiksno', kar povzroči, da slika ozadja ostane na istem mestu na monitorju, ne glede na to, kako se stran pomika. Zdaj bodo vaša pravila slike v ozadju videti tako:

telo {
background-image: url ("image.gif");
ozadje-položaj: srednji vrh;
ozadje-ponovite: ponovite-y;
pritrditev ozadja: fiksna;
}


Če želite ohraniti svoja pravila CSS čim manjše, lahko vse vrednosti ozadja združite v eno vrstico s pomočjo lastnosti 'background', kot je ta:

ozadje {
url ("image.gif") ponovite-y fiksni sredinski vrh;
}

Pri uporabi lastnosti 'background' morate vrednosti navesti v določenem zaporedju:
[barva ozadja (če se uporablja)] [ozadje-slika] [ponovitev ozadja] [priloga ozadja] [ozadje-položaj]. Izpustite lahko katero koli vrednost, ki je ne potrebujete, le seznam vrednosti, ki jih uporabljate v pravilnem vrstnem redu, ali pravilo ne bo delovalo.

Navodila Video: Kako nastaviti ARSO vreme na namizje pametnega telefona (Maj 2024).