Jedan od najčešćih zadataka prilikom uređivanja teksta i blokova u HTML-u i CSS-u. Na njega se može susresti ne samo dizajner izgleda, već i svaki upravitelj sadržaja koji uređuje sadržaj stranice. Za rješavanje ovog problema koriste se samo dva svojstva: boja - boja teksta, pozadina - rad s pozadinom, bojom ili slikom.

Rad s testnom bojom u CSS-u

boja je svojstvo koje je potrebno za određivanje boje samo za tekst. Boja se može odrediti iu HTML HEX formatu koda i u RGB (crveno zeleno plavo) formatu. Kodovi boja mogu se odabrati u grafičkim programima kao što je Photoshop ili na mreži

Sintaksa svojstva:

Boja: Boja;
Sada primjenjujemo svojstvo:

Sadržaj (
boja: # 444; // tamno sivi tekst u elementu sa sadržajem klase
}
Zašto takav primjer: navođenje boje za vezu i za tekst dvije su različite stvari. Zapamtiti. Pa, na svoju ruku preporučam napraviti boju teksta i linkova u različitim bojama.

Rad s pozadinom u CSS-u

pozadini je svojstvo koje vam omogućuje rad s pozadinom slike: postavite boju pozadine, postavite sliku kao pozadinu (jpg, gif, png formati), promijenite položaj pozadine i druge parametre, koji su opisani u nastavku.

boja pozadine- ovo svojstvo se koristi samo za postavljanje boje pozadine. Prihvaća samo kod boja. Boja se može odrediti u RGB (crveno zeleno plavo) formatu ili u HTML HEX formatu koda.

Blok (
boja pozadine: # fbb5b5; // postavite pastelnu grimiznu boju za pozadinu
}
Najbolji primjeri boja za pozadinu (modeli modernog dizajna: Flat Design, itd.):

pozadinska slika je svojstvo koje se koristi za postavljanje neke slike kao pozadine u elementu. Za određivanje slike dovoljni su parametar url i put do slike u odnosu na datoteku s css stilovima.

#leđa (
background-image: url ("slike / fon.jpg");
}

pozadina-ponoviti- može se koristiti samo kada je svojstvo pozadinske slike gore navedeno. Ovo svojstvo postavlja pravilo ponavljanja slike. Prema zadanim postavkama, slika se ponavlja na X-osi i Y-osi do granica elementa (ako je pozadina manja od elementa). U svojstvu možete odrediti postavku tako da se slike ponavljaju samo duž osi X - repeat-x (horizontalno), samo duž Y - repeat-y (vertikalno), ili uopće ne - bez ponavljanja.

#content (

pozadina-ponavljanje: ponavljanje-x; / * slika će se ponavljati samo vodoravno do granica bloka * /
}

pozadinu-privitak- popravlja pozadinu u jednom položaju, odnosno slika će se pomicati zajedno sa sadržajem bloka ili će ostati fiksna. Zadana postavka je pomicanje, što ne popravlja položaj pozadine.

#content (
background-image: url ("background.jpg");
pozadina-ponavljanje: ponavljanje-x; / * slika će se ponavljati samo vodoravno * /
pozadinski prilog: fiksni; / * prikvačeno na lokaciju * ​​/
}

pozadinski položaj- svojstvo koje postavlja položaj pozadine u elementu. Dane su dvije vrijednosti: horizontalni položaj, a zatim vertikalni položaj. Postavlja se ili digitalno (pikseli i postoci) ili slovima (lijevo, središte, desno, gore, dolje). Ovo svojstvo je potrebno kada se slika ne ponavlja (no-repeat), a pozadina treba biti pozicionirana u elementu na određeni način.

#blok (
pozadinski položaj: lijevo središte; / * vodoravno - s lijeve strane, okomito - u sredini * /
}
Mislim da je sve jasno u komentarima)
Primjer pisanja numeričke vrijednosti:

#ključevi (
pozadinski položaj: 109px 57px; / * lijeva margina 109px, gornja 57px * /
}
I ovdje mislim da bi sve trebalo biti jasno.
Mnogo nekretnina? Pogledajte kako se piše u skraćenom obliku.

Naposljetku. CSS skraćenica za pozadinu

Možete koristiti skraćeni zapis, gdje će svi parametri biti navedeni u retku:

Pozadina: slika u boji ponavlja položaj privitka;

O profesionalcima. Ovakvo pisanje će smanjiti vrijeme učitavanja stranice i prikazivanje u pregledniku. Imajte sažaljenja prema posjetiteljima, bolje je zapisati na ovaj način, ako vam, naravno, treba nekoliko nekretnina.
Da, možete preskočiti bilo koju nekretninu ako za to nema potrebe! Vi samo nastavljate specificirati vrijednosti niže na popisu.

Blok (
pozadina: # f1f1f1 url ("background.jpg") repeat-x pomicanje 100px 125px;
}

Primjer kako pozadine rade u CSS-u

Primjer koda. Rezultat rada i izvorni kod možete vidjeti na poveznici ispod.

U slučaju pozadinske slike, bolje je odrediti veličinu bloka, jer će se u protivnom mijenjati veličina prema sadržaju.

Mislim da ne postoji niti jedna stranica na kojoj se nekretnina ne koristi CSS pozadina... Čini se da što može biti jednostavnije od ove imovine? Ali ne, njegove su mogućnosti puno šire od uobičajene namjene slike ili boje kao pozadine stranice. Nešto će biti poznato, ali će mnogima sigurno nešto postati novost. U svakom slučaju, bit će korisno temeljito znati kako pozadina funkcionira.

CSS3 je donio puno novih stvari u svojstvo, to je transparentnost i dodjeljivanje više slika kao pozadine, ali o tome ćemo govoriti u nastavku, a prvo ćemo pogledati osnove svojstva. pozadini.

boja pozadine

Prilično sam siguran da ste više puta radili zadatke boje pozadine. To se može učiniti pomoću nekoliko vrsta zapisa: regularnog (koristi se naziv boje), heksadecimalne ili RGB zapisa. Svaka vrsta je jednaka, koristite ono što vam se najviše sviđa. Pokušavam koristiti najkraću verziju, a radi percepcije je jednostavnija i stilska datoteka je malo manja.

P (boja pozadine: crvena;) p (boja pozadine: # f00;) p (boja pozadine: # ff0000;) p (boja pozadine: rgb (255, 0, 0;))

U CSS3 postoji podrška za transparentnost, tako da je možete dodati našoj boji, na primjer:

P (boja pozadine: rgba (255, 0, 0, 0,5);)

Posljednja znamenka postavljena je na 50% transparentnosti. Možete postaviti vrijednost transparentnosti od 0 (potpuno prozirna pozadina) do 1 (potpuno neprozirna).

pozadinska slika

Ovo svojstvo se također vrlo često koristi, omogućuje vam da dodijelite sliku pozadini. CSS3 dodaje mogućnost dodjeljivanja više slika pozadini, pri čemu svaka stvara neku vrstu sloja, tako da se svaka sljedeća preklapa s prethodnom. Zašto bi ovo moglo biti korisno? Sve je prilično jednostavno - recimo da trebate pričvrstiti male stvari u svakom kutu stranice. Pod uvjetom da je raspored više ili manje fluidan, korištenje jedne slike nije opcija. Dakle, napravimo 4 "sloja", svaku sliku premjestimo u svoj kut i to je to, problem je riješen

Tijelo (pozadinska slika: url ("image1"), url ("image2"), url ("image3"))

Ako trebate jednu sliku dodijeliti pozadini, ostavljamo samo prvu u kodu, mislim da je to razumljivo.
Kada koristite bilo koju sliku kao pozadinu, morate imati na umu dva pravila:

• postavite kontrastnu boju pozadine u slučaju da korisnik iz nekog razloga ne može prikazati sliku. To može isključiti prikaz slika otrcano, štedi promet.
• nemojte koristiti pozadinsku sliku za prenošenje važnih informacija. Iz gore navedenog razloga, korisnik ga možda neće vidjeti.

Podrška za više pozadinskih slika dovoljno je široka. Svi preglednici, čak i IE8, podržavaju ovo svojstvo.

Od autora: Pozdravljam sve. Boje pozadine i slike igraju veliku ulogu u web dizajnu, jer omogućuju da bilo koji element bude atraktivnije predstavljen. Danas ćemo pogledati kako napraviti pozadinu u html-u.

Je li moguće proći s html-om prilikom postavljanja pozadine?

Odmah ću vam reći da ne. Općenito, html nije dizajniran za stiliziranje web stranica. Samo je vrlo nezgodno. Na primjer, postoji atribut bgcolor s kojim možete postaviti boju pozadine, ali to je vrlo nezgodno.

Sukladno tome, koristit ćemo kaskadne tablice stilova (css). Postoji mnogo više opcija za postavljanje pozadine. Danas ćemo analizirati one najosnovnije.

Kako postaviti pozadinu putem css-a?

Dakle, prije svega, morate odlučiti koji element trebate postaviti pozadinu. Odnosno, trebamo pronaći selektor kojem ćemo napisati pravilo. Na primjer, ako pozadinu treba postaviti za cijelu stranicu kao cjelinu, onda to možete učiniti kroz izbornik tijela, za sve blokove - kroz selektor div. Pa itd. Pozadina može i treba biti povezana s bilo kojim drugim selektorima: klasama stilova, identifikatorima itd.

Nakon što ste se odlučili za selektor, potrebno je napisati naziv same nekretnine. Da biste postavili boju pozadine (samo jednobojnu, a ne gradijent ili sliku), upotrijebite svojstvo boje pozadine. Nakon njega morate staviti dvotočku i napisati samu boju. To se može učiniti na različite načine. Na primjer, korištenjem ključnih riječi, hex koda, rgb, rgba, hsl formata. Bilo koja metoda će učiniti.

Najčešće korištena metoda je heksadecimalni kod. Za odabir boja možete koristiti program u kojem je vidljiv kod boje. Na primjer photoshop, paint ili neki online alat. U skladu s tim, na primjer, napisat ću opću pozadinu za cijelu web stranicu.

tijelo (boja pozadine: # D4E6B3;)

Ovaj kod treba umetnuti u odjeljak za glavu. Važno je da se datoteke nalaze u istoj mapi.

Slika kao pozadina

Koristit ću malu ikonu html jezika kao sliku:

Kreirajmo prazan blok s identifikatorom:

< div id = "bg" > < / div >

Dajmo mu eksplicitne dimenzije i pozadinu:

#bg (širina: 400px; visina: 250px; background-image: url (html.png);)

#bg ( širina: 400px; visina: 250px; pozadina - slika: url (html. png);

Iz ovog koda možete vidjeti da sam koristio novo svojstvo - background-image. Dizajniran je samo za umetanje slike kao pozadine za html element. Pogledajmo što se dogodilo:

Da biste postavili sliku, morate upisati ključnu riječ url iza dvotočke, a zatim navesti put datoteke u zagradama. U ovom slučaju, put se određuje na temelju činjenice da se slika nalazi u istoj mapi kao i html dokument. Također morate odrediti omjer slike.

Ako ste to učinili, a pozadina se i dalje ne pojavljuje u bloku, ponovno provjerite jeste li ispravno napisali naziv slike, jesu li ispravno navedeni put i ekstenzija. Ovo su najčešći razlozi zašto se pozadina jednostavno ne prikazuje jer preglednik ne može pronaći sliku.

Ali jeste li primijetili jednu posebnost? Preglednik je uzeo i reproducirao sliku kroz cijeli blok. Dakle, da znate, ovo je zadano ponašanje pozadinskih slika - ponavljaju se okomito i vodoravno sve dok ne mogu stati u blok. Ovo ponašanje možete lako kontrolirati. Da biste to učinili, koristite svojstvo background-repeat, koje ima 4 glavne vrijednosti:

Ponavljanje - zadana vrijednost, slika se ponavlja s obje strane;

Repeat-x - ponavlja se samo za ois x;

Repeat-y - ponavlja se samo duž y-osi;

Bez ponavljanja - uopće se ne ponavlja;

Možete napisati svaku vrijednost i vidjeti što će se dogoditi. Napisat ću to ovako:

pozadina-ponavljanje: ponavljanje-x;

pozadina - ponoviti: ponoviti - x;

Sada ponovite samo vodoravno. Ako napišete bez ponavljanja, tada bi bila samo jedna slika.

Super, ovo već možete završiti, budući da su to osnovne mogućnosti za rad s pozadinom, ali pokazat ću vam još 2 svojstva koja vam omogućuju veću kontrolu nad njom.

Uz ponavljanje, dizajneri izgleda koristili su za postizanje pozadinskih tekstura i gradijenta pomoću jedne male slike. Moglo je biti 30 x 10 piksela ili manje. Možda još malo. Slika je bila takva da pri ponavljanju na jednoj ili čak na obje strane nisu bili vidljivi prijelazi, tako da se kao rezultat dobivala jedna čvrsta pozadina. Usput, ovaj pristup vrijedi upotrijebiti sada ako želite koristiti bešavnu teksturu na svojoj web stranici kao pozadinu. Danas se gradijent već može implementirati pomoću css3 metoda, o tome ćemo svakako razgovarati.

Položaj u pozadini

Prema zadanim postavkama, pozadinska slika, ako nije postavljena na ponavljanje, bit će u gornjem lijevom kutu svog bloka. No položaj se može lako promijeniti pomoću svojstva background-position.

Možete to pitati na različite načine. Jedna od opcija je jednostavno naznačiti strane na kojima bi se slika trebala nalaziti:

pozadinski položaj: desno gore;

pozadina - pozicija: desno gore;

Odnosno, okomito, sve je ostalo isto: pozadinska slika nalazi se na vrhu, ali horizontalno, promijenili smo stranu udesno, odnosno udesno. Drugi način postavljanja pozicije je postotak. U ovom slučaju odbrojavanje počinje u svakom slučaju od gornjeg lijevog kuta. 100% - cijeli blok. Dakle, da bismo sliku postavili točno u središte, pišemo ovako:

pozadinski položaj: 50% 50%;

pozadina - pozicija: 50% 50%;

Zapamtite jednu važnu stvar vezanu uz pozicioniranje - prvi parametar je uvijek horizontalni položaj, a drugi vertikalni položaj. Dakle, ako vidite vrijednost od 80% 20%, onda možete odmah zaključiti da će pozadinska slika biti jako pomaknuta udesno, ali se neće puno spustiti.

I konačno, možete napisati poziciju u pikselima. Sve je isto, samo će se px umjesto %. U nekim slučajevima ovo pozicioniranje također može biti potrebno.

Skraćeni zapis

Slažem se da kod ispada prilično glomazan ako je sve postavljeno na način na koji smo to napravili. Ispada da se put do slike mora postaviti, i ponavljanje, i položaj. Naravno, ponavljanje i položaj nisu uvijek potrebni, ali u svakom slučaju ispravnije je koristiti stenografsku notaciju svojstava. izgleda ovako:

pozadina: # 333 url (bg.jpg) bez ponavljanja 50% 50%;

pozadina: # 333 url (bg.jpg) bez ponavljanja 50% 50%;

Odnosno, prvi korak je snimanje ukupne čvrste boje pozadine, ako je potrebno. Zatim put do slike, ponavljanja i pozicije. Ako neki parametar nije potreban, jednostavno ga izostavljamo. Slažem se, ovo je mnogo brže i praktičnije, a također značajno smanjujemo svoj kod. Općenito, savjetujem vam da uvijek pišete skraćenicama, čak i ako trebate samo naznačiti boju ili sliku.

Kontroliranje veličine pozadinske slike

Naša trenutna slika nije baš prikladna za sljedeći trik, pa ću uzeti još jedan. Po veličini, neka bude kao blok ili veći od njega. Dakle, zamislite da ste suočeni sa zadatkom: napraviti pozadinu tako da ne ispuni svoj blok u potpunosti. A slika je, na primjer, čak i veća od veličine bloka.

Što možete učiniti u ovom slučaju? Naravno, najjednostavnija i najrazumnija opcija bila bi jednostavno smanjiti sliku, ali to nije uvijek moguće učiniti. Recimo da je na serveru i trenutno nema vremena ni prilike za smanjenje. Problem se može riješiti korištenjem svojstva background-size, koje se može nazvati relativno novim i koje vam omogućuje manipuliranje veličinom pozadinske slike, a zapravo i bilo koje pozadine.

Dakle, moja slika sada zauzima sav prostor u bloku, ali dat ću joj veličinu pozadine:

veličina pozadine: 80% 50%;

pozadina - veličina: 80% 50%;

Opet, prvi parametar je vodoravna veličina, drugi - okomita veličina. Vidimo da je sve ispravno primijenjeno - fotografija je postala 80% širine bloka u širinu i pola u visinu. Ovdje samo trebate napraviti jedno pojašnjenje - postavljanjem veličine kao postotka, možete utjecati na proporcije slike. Stoga pazite da ne pređete u proporciju.

Kao što možete pretpostaviti, veličina pozadine također se može odrediti u pikselima. Postoje i dvije ključne riječi sa značenjem koje se također mogu koristiti:

Naslovnica - slika će biti skalirana tako da barem jedna njezina strana u potpunosti ispuni blok.

Sadrži - prilagođava ga tako da slika u potpunosti stane u blok u svojoj maksimalnoj veličini.

Prednost ovih vrijednosti je u tome što ne mijenjaju omjer slike, ostavljajući ih istima.

Također, trebate razumjeti da rastezanje slike može dovesti do pogoršanja njezine kvalitete. Mogu dati primjer iz života i stvarne prakse dizajnera izgleda. Svi znaju i razumiju da kod kodiranja za stolna računala trebate prilagoditi stranicu osnovnim širinama monitora: 1280, 1366, 1920. Ako uzmete pozadinsku sliku veličine, recimo, 1280x200, a ne postavite je kao background-size, tada su zasloni širine veći, pojavit će se prazan prostor, slika neće u potpunosti ispuniti širinu.

U 99% slučajeva to web developeru ne odgovara pa postavlja background-size: cover tako da se slika uvijek proteže na maksimalnu širinu prozora. Ovo je dobar trik za korištenje, ali sada nailazite na problem da korisnici sa širinom zaslona od 1920 piksela mogu vidjeti sliku neoptimalne kvalitete.

Podsjetim da će se rastegnuti na maksimalnu širinu. Sukladno tome, kvaliteta će se automatski pogoršati. Jedino ispravno rješenje ovdje bi bilo korištenje veće slike - širine 1920 piksela. Tada će na najširim ekranima biti u prirodnoj veličini, a na ostalima će se jednostavno polako izrezati, ali u isto vrijeme, uz ispravan odabir pozadinske slike, to neće utjecati na izgled stranice.

Općenito, ovo je samo jedan primjer kako upotrijebiti znanje koje ste stekli u ovom članku pri izradi pravih izgleda.

Poluprozirna pozadina s css-om

Još jedan trik koji se može implementirati pomoću css-a je poluprozirna pozadina. Odnosno, kroz ovu pozadinu bit će moguće vidjeti što je iza nje.

Kao primjer, postavit ću cijelu stranicu kao pozadinu sa slikom koju smo koristili ranije u primjerima. Za blok s bg identifikatorom, na kojem provodimo sve naše eksperimente, postavit ćemo pozadinu koristeći rgba format boje.

Kao što sam ranije rekao, u css-u postoji mnogo formata za postavljanje boja. Jedan od njih je rgb, koji je prilično poznat format za one koji rade u grafičkim uređivačima. Piše se ovako: rgb (17, 255, 34);

Prva vrijednost u zagradama je zasićenost crvene, zatim zelene, pa plave. Vrijednost može biti brojčana od 0 do 255. Sukladno tome, rgba format se ne razlikuje, dodaje se samo još jedan parametar - alfa kanal. Vrijednost može biti od 0 do 1, gdje je 0 puna transparentnost.

Uz pomoć CSS boja i pozadina možete postaviti gotovo svaki element web stranice, slobodno kontrolirati pozadinsku sliku, njezino ponavljanje vodoravno i okomito. Osim toga, pomoću CSS-a možete postaviti pozadinsku sliku bilo gdje na zaslonu pomoću pozicioniranja. Nemojmo još bježati predaleko, idemo redom.

svojstvo BOJE

Ovo svojstvo postavlja boju elementa, točnije, boju teksta unutar elementa. Vrijednost je navedena u jednom od mogućih oblika:

• naziv boje (ZELENA, CRNA, CRVENA ...);
• heksadecimalni kod boja (008000, 000000, FF0000 ...);
• decimalni kod boja u RGB (boja: rgb (40, 175, 250));

Svojstvo COLOR se nasljeđuje, a ako vrijednost nije navedena za bilo koji element, vrijednost će biti naslijeđena od svog pretka. Ali može se pokazati da nije navedeno ni za pretka - tada će se tablica stilova preglednika primijeniti pomoću zadanih vrijednosti. Boja elementa u ovom slučaju će najvjerojatnije biti crna.

Kao što sam već spomenuo, možete postaviti boju za gotovo sve elemente, to može biti (H1 ... H6), (jako, em) pa čak i cijeli brojevi (p), pa čak i granice tablice, ali o tome kasnije.

Pogledajmo primjer postavljanja boje teksta pomoću CSS-a:

h1 (boja: plava)

U ovom primjeru, sva zaglavlja prve razine web stranice bit će plava:

jaka (boja: crvena)

U tom slučaju, sve što se nalazi u tekstu stranice bit će označeno oznakom jaka, pocrvenjet će.

Može se napisati ovako:

h1, p, jaka (boja: zelena)

Tada će naslovi prve razine, svi odlomci i sve što je označeno oznakom biti zeleno.

Kada je potrebno istaknuti naslove različitim bojama, tada se koriste selektori klasa. Za definiranje klase u HTML-u koristite atribut razreda koji se može primijeniti na bilo koji element. U HTML kodu morat ćete napisati:

klasa = "Plava"> Boja zaglavlja ove klase bit će plava

U CSS stilskoj tablici, u ovom slučaju, pišemo pravilo gdje će selektor biti element H1, a kroz točku ( . ) naziv klase:

h1.Plava (boja: plava)

U HTML dokumentima se također koriste selektori identifikatora, oni su određeni atributom iskaznica... Identifikator je značajniji ili ima veći prioritet od klase. A ako su i klasa i identifikator navedeni u HTML kodu za element, tada će se primijeniti stil identifikatora. Identifikator je označen znakom hash ( # ). Da biste koristili identifikator u HTML kodu, morat ćete napisati:

id = "Plava"> Boja zaglavlja ovog ID-a bit će plava

U tablici stilova, zauzvrat:

h1 # Plava (boja: plava)

POZADINA-BOJA Svojstvo

Ovo svojstvo omogućuje vam da postavite boju pozadine za stranicu kao cjelinu, paragraf, vezu, općenito, za bilo koji HTML element. Da biste to učinili, boja ili vrijednost navedena je u vrijednosti svojstva. transparentan(transparentan). Kôd za pozadinu stranice je napisan:

tijelo (boja pozadine: aqua)

U ovom slučaju, pozadina stranice bit će tirkizna, a da biste dali pozadinu naslovu, napišite:

h1 (boja pozadine: žuta)

Dobivamo žutu pozadinu naslova prve razine.

CSS boja i pozadina

BACKGROUND-REPEAT Svojstvo

Ovo svojstvo se koristi kada se zada da se odredi ponavlja li se vodoravno i okomito. Važeće vrijednosti:

• ponoviti- slika se ponavlja okomito i vodoravno;
• ponovi-x- slika se ponavlja samo vodoravno;
• ponovi-y- slika se ponavlja samo okomito;
• bez ponavljanja- slika se ne ponavlja.

Kod je napisan ovako:

p (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadina-ponavljanje: ponavljanje-x
}

Tekst za ovaj odlomak bit će na vrhu pozadinske slike, koja će biti postavljena vodoravno.

POZADINA-PRILOG Nekretnina

Ovo svojstvo koristi se da pregledniku kaže treba li se pozadinska slika stranice pomicati s tekstom ( svitak) ili ostati nepomičan ( fiksno).

tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadina-ponavljanje: ponavljanje-x;
pozadinski prilog: fiksni
}

U tom će slučaju pozadinska slika ostati nepomična.

POZADINA-POZICIJA Vlasništvo

Ovo svojstvo se koristi za pozicioniranje slike u odnosu na. Vrijednosti su navedene u postocima (%), u jedinicama duljine (cm, px), po ključnim riječima:

• okomito:
• vrh- vrh slike je poravnat s gornjim rubom stranice ili bloka;
• centar
• dno- dno slike je poravnato s donjim rubom stranice ili bloka.
• vodoravno:
• lijevo- lijevi rub slike je poravnat s lijevim rubom stranice ili bloka;
• centar- središte slike je poravnato sa središtem stranice ili bloka;
• pravo- desni rub slike je poravnat s desnim rubom stranice ili bloka.

Pišemo primjer koda u postocima, jedinicama duljine i ključnim riječima:

tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadinski položaj: 0% 0%
}

Tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadinski položaj: 10px 25cm
}

Tijelo (
pozadinska slika: url ( adresa slikovne datoteke) ;
pozadinski položaj: gornji centar
}

Pozdrav dragi čitatelji blog stranice. Danas ćemo pogledati pet CSS pravila koja vam omogućuju postavljanje pozadine za bilo koji element u Html-u - background-position (slika, ponavljanje, boja, privitak). Pa, ne zaboravimo spomenuti i pozadinsko složeno pravilo.

U tome nema ništa teško, ali postoje određene suptilnosti i nijanse koje trebate znati o gotovom predlošku (sjetite se da će vam to pomoći da otvorite sve detalje bilo kojeg dizajna).

Još jednom da vas podsjetim da je ovaj članak dio serije i najbolje bi bilo da prvo počnete učiti označavanje stila, odnosno s člankom o tome što je CSS i s čime se jede, e pa, a zatim slijedite navedenim redoslijedom u referenci. Iako je, u svakom slučaju, na vama, ali sada razgovarajmo o postavljanju pozadine.

Boja, boja pozadine i pozadinska slika

Pogledajmo prvo kako se boja HTML elemenata postavlja pomoću Css pravila boja... Zapravo, ovdje je sve jednostavno. Sintaksa je potpuno normalna i možete postaviti boju u skladu s načinom na koji je to napravljeno u jeziku za označavanje hiperteksta. Kao što se sjećate, postavljeno iza znaka hash (hash - "# fe35a3"), ili pomoću tri znamenke, ako se prva podudara s vrijednošću druge, treća s četvrtom, dobro, i peti, odnosno sa šestom (kod boje "# aa33ff" može biti skraćen kao "a3f").

Također, boje u Html i Css kodu mogu se predstaviti riječima (na primjer, "crveno"), ali se najčešće koristi heksadecimalni kod:

Boja: #303

Kao primjer, obojio sam ovaj mali odlomak istom bojom kao gore (# 303). Sada se malo razlikuje od boje svih ostalih paragrafa (tamnije), koja je postavljena kao # 555 u CSS datoteci WordPress teme koju koristim. No, postavljanje boje kroz boju je prilično jednostavno, ali s pozadinom će biti malo kompliciranije.

Tako, za pozadinu u css-u postoji pet pravila koja se po želji mogu spojiti u jedan tim. Da biste ih vidjeli, možete otići na stranicu trenutne specifikacije W3C konzorcija i tamo potražiti bilo što s riječju Pozadina:

1. boja pozadine - ovo pravilo postavlja boju pozadine za bilo koji Html element. U njemu možete koristiti ili kod ili naziv nijanse, tj. sve je točno onako kako je bilo pri korištenju boje.

pozadinska slika - s njom možete koristiti sliku kao pozadinu (ali svakako pročitajte o tome, jer će teške slike usporiti učitavanje stranice), put do koje će biti naveden u funkcionalnosti url ().

Ako pogledate specifikacije, vidjet ćete to zadana boja pozadine bilo koji element imat će transparentnost (zadana vrijednost pravila je "boja pozadine: transparentna"). Međutim, u elementima neće biti transparentan prema zadanim postavkama, budući da to su elementi sustava i imaju sve drugačije i drugačije od uobičajenih oznaka jezika za označavanje hiperteksta.

Boja u boji pozadine postavljena je kao standardna (šest ili tri znamenke heksadecimalnog koda ili riječ):

Boja pozadine: #FEFCDE

Na primjer, pozadina ovog odlomka postavljena je upravo kroz boju pozadine s kodom boje danim malo iznad.

Sva ostala četiri CSS pravila primjenjivat će se samo na pozadinsku sliku, koja se može postaviti za bilo koji Html element i, po želji, može se precizno pozicionirati. Koja će se grafička datoteka koristiti može se postaviti pomoću pozadinska slika.

Ako pogledate specifikaciju jezika za označavanje stila, vidjet ćete da je zadana pozadinska slika "nijedna" (tj. ne koristi se pozadinska slika). Pa, ako vam je i dalje potreban, tada u funkciji url () morate navesti put do njega:

Pozadinska slika: url (https: //site/image/comment_top_focus.gif);

Na primjer, za ovaj odlomak koristio sam grafičku datoteku s pozadinom, put do koje je opisan gore. Možete vidjeti da je cijelo područje dodijeljeno ovom odlomku prekriveno slikom koja se ponavlja, koja u originalu izgleda ovako:

Oni. kada se koristi samo jedno pravilo pozadinske slike koje označava put do grafičke datoteke, ova slika će se množiti i okomito i vodoravno sve dok ne pokrije cijelo područje dodijeljeno na web stranici za ovaj određeni HTML element (u našem primjeru, to je bio stavak). Zašto se to događa?

Background-repeat - ponovite pozadinsku sliku

Da, jer nismo napisali nikakvu vrijednost za CSS pravilo. pozadina-ponoviti, što znači da će se za to koristiti zadana vrijednost. Gledajući specifikaciju, doznajemo da ova vrijednost odgovara "ponavljanju" (ponavljanje slike duž svih osi). Odgovor je došao sam od sebe.

Stoga, s pozadinom-repeat možemo upravljati ponavljanjima pozadinske slike... Ovo pravilo može imati samo četiri vrijednosti:




Background-position - pozicioniranje pozadine

Sada se postavlja pitanje je li moguće odmaknuti pozadinsku sliku od gornjeg lijevog kuta područja koje ograničava veličinu elementa. Naravno da možete, a za tu svrhu postoji posebno pravilo pozadinski položaj:



Gledajući CSS specifikaciju, postaje jasno zašto je zadana pozadinska slika smještena točno na gornji lijevi rub područja HTML elementa. Budući da je vrijednost "0% 0%" zadana za pravilo pozadinskog položaja.

Pa, kada ovo pravilo nije eksplicitno navedeno za element (kao u našem slučaju), tada preglednik odabire vrijednost koja je prema zadanim postavkama prihvaćena u specifikaciji (imajte na umu da se koordinatne osi u CSS-u prijavljuju samo od gornjeg lijevog ruba element područja).

Iz specifikacije se također može vidjeti da se i relativne (postotne) i apsolutne vrijednosti (na primjer) mogu koristiti za pozicioniranje pozadinske slike pomoću pozadinske pozicije. Pa, također možete koristiti riječi koje će odgovarati određenim brojčanim vrijednostima. Ali prije svega.

Prilikom postavljanja položaja pozadinske slike koristeći apsolutne jedinice u pozadinskom položaju odvija se sljedeći princip određivanja njegovog konačnog položaja:

Oni. preglednik će izračunati navedene pomake duž X i Y osi od ishodišta područja u kojem je objekt pozicioniran do početka same slike. Na primjer, u ovom odlomku pozicionirao sam pozadinsku sliku u smislu položaja pozadine koristeći sljedeća CSS pravila:

Pozadinska slika: url (https: //site/image/logo.png); background-repeat: ne-ponavljanje; background-position: 400px 25px;

Imajte na umu da će u ovom slučaju biti poravnat sa središtem okvira za prikaz, a ne sa središtem područja dodijeljenog ovim odlomcima. Jasno je da u stvarnosti takav raspored pozadinske slike vjerojatno neće naći primjenu.

Međutim, ako postavite fiksni položaj pozadine za elemente kao što su Body ili Html (tj. u oznakama koje pokrivaju cijelu web stranicu), tada će ova slika uvijek biti vidljiva u okviru za prikaz i upravo to je upotreba pozadinskog privitka CSS svojstvo u modernom blok rasporedu.

Ima li još prefab pravilo Pozadina, što vam omogućuje kombiniranje svih pet gore opisanih pravila u jednoj bočici. Štoviše, vrijednosti za svih pet u montažnoj verziji mogu se koristiti bilo kojim redoslijedom i u bilo kojoj količini (jedinstvene su i preglednik ih neće miješati jedna s drugom). Sve što ne navedete izričito, preglednik će smatrati jednakim zadanoj vrijednosti.

PNG) bez ponavljanja 50%;

Pravilo montaže prikazano u primjeru primjenjuje se na ovaj odlomak radi jasnoće. Ispalo je da nije lijepo, ali to nije glavna stvar. Za ovaj odlomak koristi se čudna žuta ispuna pozadine, kao i slika LiveInternet logotipa, poravnata sa središtem odlomka. Jer nije navedena vrijednost za pravilo pozadinskog privitka, tada se koristi zadana vrijednost pomicanja.

Ako za neki element želite postaviti samo ispunu bojom, a ne zamarati se pozadinskom slikom, onda možete umjesto:

Boja pozadine: #FEFCDE

pisati:

Pozadina: #FEFCDE

Za sve ostale vrijednosti kombiniranog pravila bit će uzeto prema zadanim postavkama, a to je ono što vam je potrebno.

Sretno ti! Vidimo se uskoro na stranicama blog stranice

možete pogledati više videozapisa ako odete na

");">


Možda ćete biti zainteresirani

Stil liste (vrsta, slika, pozicija) - Css pravila za prilagođavanje izgleda popisa u HTML kodu Kako postaviti naizmjeničnu boju pozadine redaka tablica, popisa i drugih Html elemenata na web-mjestu koristeći pseudoklasu nth-child
Pozicija (apsolutna, relativna i fiksna) - načini pozicioniranja HTML elemenata u CSS-u (pravila lijevo, desno, gore i dolje)
Float i clear u CSS - alatima za raspored blokova
Pozicioniranje sa Z-indeksom i pravilom CSS kursora za promjenu pokazivača miša