Morda mislite, da je oblikovanje ozadja preprosto, vendar ima CSS veliko nejasnih in močnih lastnosti, ki se jih lahko naučite.
Tema ozadja vašega spletnega mesta lahko bistveno vpliva na njegov videz in občutek. Barve, slike in vzorci ozadja vzbujajo čustva in ustvarjajo odlične uporabniške izkušnje.
Za nastavitev sloga ozadja elementov HTML lahko uporabite lastnosti ozadja CSS. Izvedite vse o nekaterih lastnostih CSS, ki jih lahko uporabite za ustvarjanje odličnih ozadij.
1. Barva ozadja
The lastnost barve ozadja nastavi barvo ozadja elementa. Barvo lahko nastavite z imenom, kot je "rdeča", vrednostjo HEX, kot je "#00FF00" ali vrednostjo RGB - kot "rgb (0, 255, 0)". Uporabite lahko tudi vrednost HSL, da nastavite barvo ozadja z barvnim odtenkom, nasičenostjo in svetlostjo.
Naslednji primer nastavi barvo ozadja celotne strani na oranžno. Vsak element naslova dobi drugačno ozadje.
<telo>
<h2>Jaz sem Zelenah2>
<h3>Jaz sem Rdečah3>
<h4>Jaz sem Blueh4>
telo>Z uporabo CSS lahko za vsak element uporabite edinstveno barvo ozadja:
telo {
Barva ozadja: oranžna;
}h2 {
Barva ozadja: #006600;
}h3 {
Barva ozadja: rgb(128, 0, 0);
}
h4{
Barva ozadja: hsl(240, 100%, 50%);
}
S tem bo stran oblikovana tako, da bo videti:
Za določitev prosojnosti elementa lahko uporabite lastnost motnosti. Motnost ima vrednosti med 0,0 in 1,0. Nižja kot je vrednost, bolj pregleden je element.
Na primer, poskusite nastaviti motnost elementa telesa na 0,5:
telo {
Barva ozadja:oranžna;
nepreglednost:0.5;
}Prikazalo se bo takole – primerjajte barve s tistimi na prejšnjem posnetku zaslona:
2. slika ozadja
Lastnost background-image nastavi sliko kot ozadje elementa. Lahko se sklicujete na lokalno sliko ali sliko iz interneta.
<telo>
<h1>zdravotam!h1>
<str>jazimajoanslikavmojozadje!str>
telo>Datoteka CSS:
telo {
slika ozadja:url("https://slike.pexels.com/fotografije/1191710/pexels-fotografija-1191710.jpeg?avto=stisniti&cs=tinysrgb&w=1260&h=750&dpr=1");
}To bo prikazano takole:
Uporabite lahko tudi prelivi ozadja ustvariti edinstven videz vaše aplikacije.
3. ozadje-ponovitev
Lastnost slike ozadja privzeto ponavlja slike. Izberete lahko ponovitev slike vodoravno na osi x ali navpično na osi y.
Če ponovitev ne ustreza vašemu slogu, jo lahko odstranite z vrednostjo brez ponovitve.
<telo>
<h1>Pozdravljeni!h1>
<h3>Demonstriram lastnost ponovitve ozadja-ponovitve na osi x!h3>
telo>Uporabite naslednji CSS, da uporabite ponavljajoče se ozadje vzdolž osi x:
telo {
slika ozadja: url("https://slike.pexels.com/fotografije/459335/pexels-fotografija-459335.jpeg?avto=stisniti&cs=tinysrgb&w=1260&h=750&dpr=1");
ozadje-ponovitev: ponovi-x;
}Rezultat:
Nato poskusite ponoviti sliko na osi y:
telo {
slika ozadja:url("https://cdn.pixabay.com/fotografija/2016/04/18/22/05/školjke-1337565__340.jpg");
ozadje-ponovitev:repeat-y;
}Rezultat:
Primer na osi y je vsekakor videti popačen. Če to niso vzorci, ki jih iščete, jih lahko določite brez ponovitve namesto tega:
telo {
slika ozadja:url("https://slike.pexels.com/fotografije/259915/pexels-fotografija-259915.jpeg?avto=stisniti&cs=tinysrgb&w=600");
ozadje-ponovitev:brez ponavljanja;
}Rezultat:
4. položaj ozadja
Lastnost background-position določa položaj slike ozadja znotraj njenega elementa. Uporablja ključne besede, specifične za položaj, kot je center, vrh, in dnoali vrednost slikovne pike ali odstotek.
Dodajte lastnost položaja ozadja zadnji sliki:
telo {
slika ozadja: url("https://slike.pexels.com/fotografije/259915/pexels-fotografija-259915.jpeg?avto=stisniti&cs=tinysrgb&w=600");
položaj ozadja: vrhcenter;
}Videti bo takole:
Vidite lahko, da slika popači videz spletnega mesta. Popravimo to z naslednjo lastnostjo.
5. velikost ozadja
Z lastnostjo slike ozadja lahko določite določeno velikost slike. Uporablja ključne besede, kot je pokrov in vsebujejo ali vrednost pikslov ali odstotkov. Popravimo popačeno sliko ozadja z dodajanjem lastnosti velikosti ozadja.
telo {
slika ozadja: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=stisni&cs=tinysrgb&w=600");
ponavljanje v ozadju: brez ponavljanja;
položaj ozadja: sredina;Rezultat kaže, da slika zdaj sorazmerno pokriva spletno stran.
6. ozadje-priponka
Lastnost ozadja-priponke določa, ali položaj slike ozadja ostane fiksen ali se pomika. Uporabite lahko fiksne ključne besede ali pomikanje.
Pokažimo to v naslednji kodi:
<telo>
<h1>Lastnost ozadja-priponkeh1>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
<str>Z lastnostjo fiksne priloge boste opazili, da se ozadje ne premika skupaj z besedilom.str>
telo>Datoteka CSS:
telo {
slika ozadja: url("https://slike.pexels.com/fotografije/96627/pexels-fotografija-96627.jpeg?avto=stisniti&cs=tinysrgb&w=600");
ozadje-ponovitev: brez ponovitve;
položaj ozadja: center;
velikost ozadja: pokrov;
ozadje-priponka: fiksno;
}Če se premaknete po strani navzdol, boste opazili, da se ozadje ne premakne:
Če želite prikazati lastnost drsne priloge v ozadju, spremenite ključno besedo v drsenje. Opazili boste, da se zdaj ozadje premika skupaj z besedilom.
telo {
slika ozadja: url("https://slike.pexels.com/fotografije/96627/pexels-fotografija-96627.jpeg?avto=stisniti&cs=tinysrgb&w=600");
ozadje-ponovitev: brez ponovitve;
položaj ozadja: center;
velikost ozadja: pokrov;
ozadje-priponka: drsenje;
}7. Ozadje Stenografska lastnost
Morda boste opazili, da morate vključiti več lastnosti, da dobite popolno ozadje. To vključuje pisanje veliko kode. Vendar pa lahko kodo skrajšate z lastnostjo ozadja.
Lastnost stenografije vam omogoča, da v eni vrstici nastavite veliko lastnosti ozadja. Uporabite ključno besedo ozadje da nastavite lastnost stenografije.
Na primer, namesto da napišete kodo, kot je ta:
telo {
Barva ozadja: zelena;
slika ozadja: url("prenosni računalnik3.jpg");
ozadje-ponovitev: brez ponovitve;
velikost ozadja: pokrov;
ozadje-priponka: drsenje;
položaj ozadja: center;
}Lahko ga zapišete v eno vrstico, takole:
telo {
ozadje: zelenaurl("prenosni računalnik3.jpg") brez ponovitvepokrovdrsenjecenter;
}Lastnost stenografije sledi določenemu vrstnemu redu. Lastnosti morate poravnati v tem vrstnem redu, tudi če ena ali več manjka. Vrstni red je:
- Barva ozadja
- slika ozadja
- ozadje-ponovitev
- ozadje-priponka
- položaj ozadja
S CSS lahko ustvarite zanimive modele z različnimi vzorci ozadja. S temi vzorci lahko ustvarite edinstvena in izjemna ozadja za vaše spletno mesto.
Druge lastnosti ozadja v CSS
CSS je močan in z njim lahko naredite marsikaj, da popestrite svojo aplikacijo. Za dodajanje animacije lahko uporabite lastnosti, kot so background-clip, background-origin in background-blend-mode.
Za prilagajanje strani lahko uporabite tudi prelive in vzorce. Eksperimentirajte z lastnostmi ozadja CSS, da izostrite svoje veščine spletnega oblikovanja.
