Ozadje HTML: Kaj je to?

Ozadje je pomemben del spletne strani. Privzeto ima belo barvo. Vendar jezik HTML ponuja več možnosti za spreminjanje njegovih lastnosti. Na internetu, večina strani - z barvitim ozadjem, vključno z animacijo. Imajo različne grafike ali slike ozadja. Nastavitev sloga ozadja za spletne strani se izvede z uporabo atributa - ozadje v HTML-ju. Za nastavitev ozadja elementa je uporabljenih več lastnosti CSS.

Atributi za spreminjanje nastavitev ozadja

V kodi, napisani v HTML-ju, je ozadje nastavljeno tako za celotno stran kot tudi za njene posamezne elemente. Prej je bila za to uporabljena oznaka, zdaj pa se ta praksa šteje za zastarelo. Atribut je bil uporabljen za specifikacijo 401 in je bil zabeležen v HTML-ju :. Zdaj je najlažji način, da spremenite privzeto vrednost, nastavite lastnosti atributa ozadja za oznako.


V HTML in CSS se uporablja pet glavnih atributov za spreminjanje ozadja:
  • -barva - prikazuje, katera barva bo uporabljena za poplave;
  • - slika - nastavi sliko za ozadje;
  • -pozicija - označuje, kam naj se postavi slika ozadja;
  • -repeat - določa, ali je slika ponovljiva;
  • -odprtje - določa, ali se bo slika premikala skupaj s stranjo;
  • -size - nastavi ozadje na določeno velikost;
  • -origin - določa območje za pozicioniranje slike ozadja;
  • -clip - Določa, kako se slika ozadja ali barva ozadja prikaže pod mejami elementa.
  • Prvičpet lastnosti se lahko združi v en kratek atribut - ozadje. Atribut deluje v brskalnikih Firefox, Safari, Opera in IE8. Le v zastarelih IE7 in IE6 ozadje niso vključene meje.


    Kako spremeniti barvo ozadja v HTML-ju

    Atribut "barva ozadja" (HTML in CSS) zapolni strani s polno barvo. Obstaja več načinov za nastavitev barve z različnimi formati:
  • -barva: rdeča;
  • -barva: rgb (00255);
  • -barva: # 2500ff.
  • Za ozadje je mogoče nastaviti transparentno lastnost, ki ustreza stopnji preglednosti in omogoča, da so vsi spodnji elementi vidni.

    Kako nastaviti sliko za ozadje

    Slika ozadja je lastnost, ki vam omogoča, da določite sliko, ki bo prikazana namesto ozadja. Podana je s kodo CSS in jezikom HTML: background-image: url (image.jpg). Koda je zelo preprosta, vendar mora biti slika v isti mapi kot datoteke s slogi. V nasprotnem primeru je treba v oklepaju navesti pravilen naslov, na primer: background-image: url (images /image.jpg). Slika ozadja se lahko uporablja v povezavi z barvo ozadja. Če se ne ponovi, bo druga, ki ni zajeta v prostoru slike, imeti barvo, določeno v tej lastnosti.

    Ozadje

    Atribut CSS in položaj HTML v ozadju nadzorujejo lokacijo slike ozadja in določa, kje se nahaja v elementu. Uporabite ga, da določite, kje bo zgornji levi kot slike lociran glede na zgornji levi kot elementa. Najprej je v lastnost pozicija napisana na vodoravni koordinatni osi, nato pa - na navpičnici. Za touporaba pikslov je lažja.
    Na primer:
  • - položaj: 0 0 - privzeto se uporablja in označuje lokacijo ozadja v zgornjem levem kotu elementa;
  • - položaj: 100px 0 - premakne sliko v desno;
  • -pozicija: -100px 0 - premakne sliko v levo;
  • -pozicija: 0100px - spustite sliko.
  • Atribut pozicije ozadja deluje tudi z drugimi vrednostmi, ključnimi besedami in odstotki. Lahko so uporabne, če velikost elementa ni določena v slikovnih pikah.

    Kako uporabiti ključne besede za pozicioniranje ozadja

    Ključne besede se lahko uporabijo za določitev koordinat na vodoravni in navpični osi, ni pomembno, v kakšnem zaporedju so zapisane. Različice ključnih besed za vodoravno os:
  • levo;
  • središče;
  • desno.
  • Za navpično os:
  • zgoraj;
  • središče;
  • od spodaj.
  • Pri delu z drugimi merskimi enotami se koordinate najprej določijo na vodoravni osi, nato pa na navpičnici. Na primer, položaj ozadja: spodaj desno. Obrestne mere se uporabljajo na enak način. V tem primeru se odštevanje nahaja v zgornjem levem kotu okna brskalnika. Primer uporabe obresti: položaj ozadja: 100% 50%. To pomeni, da se slika premakne v desno in bo v sredini desnega dela elementa. Enak učinek lahko dosežete tudi, če uporabite nepremičnino: desno središče. Če uporabite vrednost položaja ozadja: 100% 100%, se bo ozadje pojavilo v spodnjem desnem kotu elementa.

    Ponovitev ozadja

    Privzeto je, ko je slika nastavljena naČe se kakovost ozadja ponovi, se ponavlja tako horizontalno kot vertikalno, dokler se ne napolni celotno okno ali element brskalnika. Včasih pa je potrebno, da se slika prikaže samo enkrat ali pa se nahaja le v eni smeri. Če želite to narediti, CSS in HTML za ozadje zahtevata naslednje atribute:
  • -repeat: repeat - privzeto se slika ponavlja, dokler se element ne izpolni v celoti;
  • -ponovitev: brez ponavljanja - slika se ne ponavlja in se uporablja na strani samo enkrat;
  • -ponovitev: ponovitev-x - ponavljanje samo na vodoravni osi;
  • -ponovitev: ponovite-y - ponovite samo na navpični osi;
  • ​​
  • -repeat: dedovanje - brskalnik uporablja vrednost, dodeljeno nadrejenemu elementu.
  • Atribut za drsni trak

    HTML background-attachment določa, kaj se zgodi s sliko, ko se uporabnik pomika po strani. Ta atribut ima več lastnosti: drsenje, fiksiranje in podedovanje. Podeduj poročila, da priloga v ozadju podeduje lastnost svojega nadrejenega. Za pravilno uporabo priloge v ozadju morate razmisliti o tem, kako bo uporabnik vplival na pogled. Pregledovalnik je del brskalnika, ki prikazuje spletno stran. Ko se pomikate po mestu, se ne premika. Namesto tega se vsebina strani pomika navzgor, vendar se zdi, da se stran pomika navzdol v oknu brskalnika.

    Ko nastavljate lastnost HTML background-attachment: scroll, se brskalniku pove, da se mora ozadje pomikati skupaj z elementom. Ozadje se "drži" elementa in se pomika, dokler ne izgine. To je toprivzeta vrednost za prilogo v ozadju. Toda, ko je nastavljena podlaga za prilogo: fiksna lastnost, mora ozadje ostati na mestu in se ne sme premikati skupaj z vsebino. Ko se pomikate po strani, ostane vedno vidna.

    Kako na kratko zapisati lastnosti ozadja

    Namesto da bi vsa ta pravila zapisala vsakič posebej, jih lahko združite v eno in jih zapišete takole: ozadje :. Ni vam treba posebej navesti vrednosti. Če lastnost ni uporabljena, bo uporabljena privzeta vrednost. Pomembno je omeniti, da se slika ozadja pojavi samo na tistih območjih, kjer je prisoten nadrejeni element. Tudi ko se nahaja glede na okno brskalnika, se ne prikaže, če njegov nadrejeni element ni viden. Za ozadje elementa v CSS3 lahko uporabite več kot eno sliko. Koda bo enaka kot CSS2, samo posamezni naslovi slik morajo biti ločeni z vejico. Prvi se bo nahajal v zgornjem delu elementa, naslednji pa se bo združil z njim.

    Lastnost velikosti ozadja

    Včasih mora spletno mesto določiti ozadje določene velikosti. Atribut, ki se uporablja za to v HTML - velikosti ozadja. Ta lastnost ima številne možne vrednosti:
  • -size: vsebuje - prilagodi sliko tako, da se ujema z elementom, hkrati pa ohranja razmerje stranskih slik;
  • -size: cover - Razširi sliko, da zapolni element, obdrži razmerja;
  • velikost: 100px 100px - prilagodi sliko na določeno velikost;
  • velikost: 50% 100% - Prilagodi sliko na določeno velikost, odstotek se nanaša na velikost elementa.
  • Velikost ozadja v HTML-ju za Firefox do različice 4.0 je nastavljena na neprivzeto lastnost -moz-background-size. Podobno je za različico Opera 1053 potrebno predpisati velikost -o-ozadja.

    lastnost izvora ozadja

    Lastnost izvornega izvora se uporablja v povezavi s položajem ozadja za pozicioniranje slike ozadja. Uporablja se, če je priloga v ozadju nastavljena na fiksno. Njegove parametre je mogoče izpeljati iz meja, vdolbin ali vsebine elementa.
  • - izvor: obrobno polje; ozadje - položaj se izračuna od meje.
  • - izvor: oblazinjenje; ozadje - položaj se izračuna iz polja polnjenja.
  • -izvir: vsebina-box; ozadje - položaj se izračuna na podlagi vsebine postavke.
  • Možnosti uporabe slike za ozadje

    Poleg očitnih okrasnih prednosti ozadja se lahko uporablja tudi za druge namene. Če na primer dodate lastnost plavajočega CSS za elemente odmika, je težko zagotoviti, da sta dva ali več stolpcev enake širine. Če se razlikujejo, se bo ozadje enega od stolpcev končalo pred ozadjem drugega. Ta učinek se lahko izognete, če za vsak stolpec uporabite ločeno ozadje. Vendar je veliko lažje uporabiti eno sliko ozadja za njihov nadrejeni element. Druga možna aplikacija je okrasitev neurejenih seznamov. Bulites v njih morda ne izgleda zelo privlačno, zato jih je bolje skriti in nadomestiti z ozadjem.

    Pisave namesto ozadja v html: pisava ozadja

    Izbira pisave zaregistracija spletnih mest je zelo omejena. Izdelate lahko originalne pisave, vendar morajo uporabniki omogočiti podporo za javascript. Enostavnejša rešitev, ki deluje v vsakem brskalniku - ustvarja sliko iz besedila in jo uporablja kot ozadje za element. Če želite, da besedilo ostane v označevalniku za iskalnike in bralnike zaslona, ​​preprosto dodelite razred elementu, pustite besedilo v opisu in dodajte sliko prek CSS-ja. V tem primeru bodo brskalniki prikazali napis z ne-uporabniško definiranimi pisavami, in sicer tisto, ki ga je izbral oblikovalec.

    Novo lastnost preloma ozadja

    CSS3 ima novo funkcijo: elemente je mogoče razdeliti na posamezne bloke, vrstice in strani. Lastnost background-break določa, kako je ozadje prikazano v različnih oknih. Možne vrednosti:
  • - prekinitev: neprekinjeno - privzeta vrednost. Obravnava bloke, kot da med njimi ni prostora;
  • - prekinitev: omejevalna omarica - upošteva prostor med bloki;
  • Zlom: vsakokratno polje - obdeluje vsak blok v posameznem elementu in ponovno nariše ozadje za vsakega posebej.
  • Obstaja veliko drugih lastnosti, ki pomagajo prilagoditi prikaz ozadja, tukaj so najpogosteje opisane. Znanje prihaja z izkušnjami, zato je praksa najboljši način za učenje CSS in HTML.

    Sorodne publikacije