Jedan od najčešćih zadataka prilikom uređivanja teksta i blokova u HTML-u i CSS-u. S njim se može suočiti ne samo programer, već i svaki menadžer 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 sa test bojom u CSS-u

boja je svojstvo koje je potrebno za specificiranje boje samo za tekst. Boja se može specificirati u HTML HEX formatu koda iu 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 primijenite 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 su dvije različite stvari. Zapamti. Pa, na svoju ruku preporučujem da boju teksta i linkova napravite u različitim bojama.

Rad sa pozadinom u CSS-u

pozadini je svojstvo koje vam omogućava da radite sa pozadinom slike: postavite boju pozadine, postavite sliku kao pozadinu (jpg, gif, png formati), promijenite poziciju pozadine i druge parametre koji su opisani u nastavku.

boja pozadine- Ovo svojstvo se koristi samo za postavljanje boje pozadine. Prihvata samo kod boja. Boja se može specificirati u RGB (Red Green Blue) formatu ili u HTML HEX formatu koda.

Blokiraj (
boja pozadine: #fbb5b5; // postavlja pastelno grimizna boja pozadine
}
Najbolji primjeri boja za pozadinu (modeli modernog dizajna: Flat Design, itd.):

pozadinska slika je svojstvo koje se koristi za postavljanje neke slike kao pozadine elementa. Za specificiranje slike dovoljni su parametar url i putanja do slike u odnosu na datoteku sa css stilovima.

#nazad(
background-image: url("images/fon.jpg");
}

background-repeat- može se koristiti samo kada je svojstvo background-image specificirano iznad. Ovo svojstvo postavlja pravilo ponavljanja slike. Podrazumevano, slika se ponavlja duž x-ose i duž y-ose do ivica elementa (ako je pozadina manja od elementa). U svojstvu možete odrediti postavku tako da se slike ponavljaju samo duž X ose - ponavljanje-x (horizontalno), samo duž Y - ponavljanje-y (vertikalno) ili da se uopšte ne ponavljaju - bez ponavljanja.

#content(

background-repeat: repeat-x; /* slika će se ponavljati samo horizontalno do ivica bloka */
}

background-attachment- fiksira pozadinu u jednoj poziciji, odnosno slika će se pomicati zajedno sa sadržajem bloka ili će ostati fiksna. Zadana vrijednost je pomicanje, što ne fiksira poziciju pozadine.

#content(
background-image: url("background.jpg");
background-repeat: repeat-x; /* slika će se ponavljati samo horizontalno */
pozadinski prilog: fiksni; /* zakačeno na lokaciji */
}

pozadinska pozicija- svojstvo koje specificira lokaciju pozadine u elementu. Date su dvije vrijednosti: horizontalni položaj, a zatim vertikalni položaj. Navedeno ili numerički (pikseli i procenti) ili abecedno (lijevo, centar, desno, gore, dolje). Ovo svojstvo je potrebno kada se slika ne ponavlja (no-repeat), a pozadina mora biti pozicionirana u elementu na određeni način.

#block(
background-position: lijevo-centar; /* horizontalno - na lijevoj strani, visina - u sredini */
}
Mislim da je sve jasno u komentarima)
Primjer pisanja numeričke vrijednosti:

#ključevi (
background-position: 109px 57px; /* padding lijevo 109px, gornji 57px */
}
I ovdje mislim da bi sve trebalo biti jasno.
Mnogo nekretnina? Hajde da vidimo kako se piše skraćeno.

Na kraju. CSS skraćenica za pozadinu

Možete koristiti skraćenu notaciju, gdje će svi parametri biti navedeni u redu:

Pozadina: slika u boji ponavlja poziciju priloga;

O plusevima. Takav zapis skraćuje vrijeme učitavanja i prikazivanja stranice od strane pretraživača. Imajte sažaljenja prema posjetiocima, bolje je pisati na ovaj način, osim ako vam, naravno, ne treba više nekretnina.
Da, možete preskočiti bilo koju nekretninu ako za to nema potrebe! Samo nastavljate da dodajete vrednosti niže na listi.

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

Primjer kako pozadine rade u CSS-u

Primjer koda. Rezultat rada i izvorni kod možete pogledati na linku ispod.

U slučaju pozadinske slike, bolje je odrediti dimenzije bloka, inače će uzeti veličinu prema sadržaju.

Mislim da ne postoji nijedna lokacija na kojoj se imovina ne bi koristila css pozadina. Čini se, šta može biti jednostavnije od ove imovine? Ali ne, njegove mogućnosti su mnogo šire od uobičajenog podešavanja slike ili boje kao pozadine stranice. Neki će biti poznati, a neki će mnogima biti novi. U svakom slučaju, bit će korisno dobro znati kako pozadina funkcionira.

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

boja pozadine

Prilično sam siguran da ste već nekoliko puta dodijelili boju pozadine. To se može učiniti korištenjem nekoliko vrsta zapisa: regularnog (koristi se naziv boje), heksadecimalne ili RGB zapisa. Svaki tip je ekvivalentan, koristite onaj koji vam se najviše sviđa. Trudim se da koristim najkraću verziju, a za percepciju 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;))

CSS3 uvodi podršku za transparentnost, tako da je možemo dodati našoj boji, ovako:

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

Posljednja cifra postavlja prozirnost na 50%. 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ćava vam da dodijelite sliku pozadini. CSS3 dodaje mogućnost dodjeljivanja više slika pozadini, pri čemu svaka kreira sloj sortiranja, tako da svaka prekriva prethodnu. Zašto bi ovo moglo biti korisno? Sve je prilično jednostavno - recimo da trebate zašrafiti male stvari u svaki od uglova stranice. Pod uslovom manje ili više fluidnog izgleda, upotreba jedne slike nije opcija. Dakle, napravimo 4 "sloja", pomerimo svaku sliku u svoj ugao i to je to, problem je rešen

Tijelo (slika u pozadini: 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 zapamtiti dva pravila:

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

Podrška za više pozadinskih slika je prilično opsežna. Svi pretraživači, čak i IE8, podržavaju ovo svojstvo.

Od autora: Pozdravljam sve. Boje pozadine i slike u web dizajnu igraju veliku ulogu, jer vam omogućavaju da atraktivnije dizajnirate bilo koji element. Kako napraviti pozadinu u html-u, danas ćemo pogledati.

Da li je moguće proći sa html-om prilikom postavljanja pozadine?

Odmah ću vam reći da nije. Općenito, html nije dizajniran za dizajniranje web stranica. Samo je veoma nezgodno. Na primjer, postoji atribut bgcolor koji se može koristiti za postavljanje boje pozadine, ali to je vrlo nezgodno.

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

Kako postaviti pozadinu sa css-om?

Dakle, prije svega, morate odlučiti na koji element želite postaviti pozadinu. Odnosno, trebamo pronaći selektor kojem ćemo napisati pravilo. Na primjer, ako trebate postaviti pozadinu za cijelu stranicu kao cjelinu, onda to možete učiniti kroz selektor tijela, za sve blokove kroz selektor div. pa itd. Pozadina može i treba biti pridružena bilo kojem drugom selektoru: klasama stilova, identifikatorima itd.

Nakon što ste se odlučili za selektor, potrebno je napisati naziv samog svojstva. Da biste postavili boju pozadine (naime, punu boju, a ne gradijent i ne sliku), koristi se svojstvo background-color. Nakon toga, potrebno je 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 poslužiti.

Metoda koja se najčešće koristi je heksadecimalni kod. Za odabir boja možete koristiti program u kojem možete vidjeti kod boje. Na primjer photoshop, paint ili neki online alat. Shodno tome, na primjer, propisat ću zajedničku pozadinu za cijelu web stranicu.

tijelo (boja pozadine: #D4E6B3; )

Ovaj kod je potrebno umetnuti u odjeljak za glavu. Važno je da se fajlovi nalaze u istom folderu.

Slika kao pozadina

Za sliku ću koristiti malu ikonu html jezika:

Kreirajmo prazan blok sa ID-om:

< 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 background-image : url (html . png ) ;

Iz ovog koda možete vidjeti da sam koristio novo svojstvo pod nazivom background-image. Namijenjen je samo za umetanje slike kao pozadine u html element. Da vidimo šta se desilo:

Da biste naveli sliku, morate napisati ključnu riječ url iza dvotočke, a zatim navesti putanju do datoteke u zagradama. U ovom slučaju, putanja je određena na osnovu činjenice da se slika nalazi u istom folderu kao i html dokument. Također morate odrediti format slike.

Ako ste to učinili, a pozadina se i dalje ne prikazuje u bloku, provjerite ponovo da li ste ispravno napisali naziv slike, da li su staza i ekstenzija ispravno postavljeni. Ovo su najčešći razlozi zašto se pozadina jednostavno ne prikazuje, jer pretraživač ne može pronaći sliku.

Ali jeste li primijetili jednu osobinu? Pregledač je snimio i umnožio sliku kroz cijeli blok. Dakle, samo da znate, ovo je podrazumevano ponašanje pozadinskih slika - one se ponavljaju okomito i horizontalno sve dok mogu da stanu u blok. Ovim ponašanjem možete lako upravljati. Da biste to učinili, koristite svojstvo background-repeat, koje ima 4 glavne vrijednosti:

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

Repeat-x - ponavlja se samo na osi x;

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

Bez ponavljanja - uopšte se ne ponavlja;

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

background-repeat: repeat-x;

pozadina - ponavljanje : ponavljanje - x ;

Sada ponovite samo horizontalno. Ako pišete bez ponavljanja, tada bi bila samo jedna slika.

Odlično, možemo završiti s ovim, pošto su ovo osnovne karakteristike rada sa pozadinom, ali pokazaću vam još 2 svojstva koja vam omogućavaju da dobijete više opcija kontrole.

Uz ponavljanje, koderi su koristili da postignu poentu stvaranja pozadinskih tekstura i preliva koristeći jednu sićušnu sliku. Može biti 30 puta 10 piksela ili čak i manji. Ili možda malo više. Slika je bila takva da pri ponavljanju na jednoj ili čak na obje strane nisu bili vidljivi prijelazi, tako da se na kraju dobijala jedna čvrsta pozadina. Usput, ovaj pristup vrijedi koristiti sada ako želite koristiti bešavnu teksturu na svojoj web lokaciji kao pozadinu. Gradijent se danas već može implementirati pomoću css3 metoda, o tome ćemo svakako govoriti kasnije.

Položaj u pozadini

Podrazumevano, pozadinska slika, ako nije podešena da se ponavlja, biće u gornjem levom uglu svog bloka. Ali pozicija se može lako promijeniti pomoću svojstva background-position.

Možete to pitati na različite načine. Jedna od opcija je jednostavno odrediti strane na kojima bi slika trebala biti:

background-position: desno gore;

pozadina - pozicija: desno gore;

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

pozadinski položaj: 50% 50%;

pozadinski položaj: 50% 50%;

Jedna važna stvar koju treba zapamtiti u vezi pozicioniranja je da je prvi parametar uvijek horizontalna pozicija, a drugi parametar vertikalna pozicija. 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 mnogo spustiti.

I konačno, možete odrediti poziciju u pikselima. Sve je isto, samo će umjesto % biti px. U nekim slučajevima, takvo pozicioniranje može biti potrebno.

Skraćena notacija

Slažem se da kod ispada prilično glomazan ako se sve postavi na način na koji smo to uradili. Ispada da je potrebno postaviti i put do slike, i ponavljanje, i poziciju. Naravno, ponavljanje i pozicija nisu uvijek neophodni, ali u svakom slučaju bi bilo ispravnije koristiti stenografiju svojstva. Ona 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 izostavite. Slažem se, ovo je mnogo brže i praktičnije, a također značajno smanjujemo naš kod. Općenito, savjetujem vam da uvijek pišete skraćeno, čak i ako trebate navesti samo boju ili sliku.

Kontrola veličine pozadinske slike

Naša trenutna slika se ne uklapa baš najbolje za sljedeći trik, pa ću uzeti drugačiji. Po veličini neka bude kao blok ili veći od njega. Dakle, zamislite da ste suočeni sa zadatkom da napravite pozadinsku sliku tako da ne ispuni svoj blok u potpunosti. A slika je, na primjer, čak i veća od veličine bloka.

Šta se može učiniti u takvom slučaju? Naravno, najjednostavnija i najrazumnija opcija bila bi jednostavno smanjiti sliku, ali to nije uvijek moguće učiniti. Recimo da leži na serveru i trenutno nema vremena i mogućnosti da se smanji. Problem se može riješiti uz pomoć svojstva background-size, koje se može nazvati relativno novim i koje vam omogućava da manipulišete veličinom pozadinske slike, a zapravo i bilo koje pozadine.

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

veličina pozadine: 80% 50%;

veličina pozadine: 80% 50%;

Opet, prvi parametar je horizontalna veličina, drugi je vertikalna veličina. Vidimo da je sve ispravno primijenjeno - fotografija je postala 80% širine bloka u širini i pola u visini. Ovdje trebate napraviti samo jedno pojašnjenje - postavljanjem veličine u postocima, možete utjecati na proporcije slike. Zato budite oprezni ako želite da ne narušite proporcije.

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

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

Sadrži - mjeri tako da se slika u potpunosti uklopi u blok u svojoj maksimalnoj veličini.

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

Također, trebate razumjeti da rastezanje slike može dovesti do pogoršanja njenog kvaliteta. Mogu dati primjer iz života i stvarne prakse layout dizajnera. Svi znaju i razumiju da kada dizajnirate za desktop, morate prilagoditi stranicu širinama glavnog monitora: 1280, 1366, 1920. Ako uzmete pozadinsku sliku veličine, recimo, 1280 x 200, a ne postavite veličinu pozadine na kada se pojavi ekran sa širinom većom od praznog prostora, slika neće u potpunosti ispuniti širinu.

U 99% slučajeva to ne odgovara web programeru, pa on postavlja background-size: cover tako da se slika uvijek proteže do maksimalne širine prozora. Ovo je dobar trik za korištenje, ali sada ćete naići na problem da korisnici sa širinom ekrana od 1920 piksela mogu vidjeti suboptimalan kvalitet slike.

Podsjećam da će se protezati do maksimalne širine. Shodno tome, kvalitet ć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 svojoj prirodnoj veličini, a na drugima će se jednostavno polako odsjeći, ali u isto vrijeme, uz kompetentan odabir pozadinske slike, to neće utjecati na izgled stranice.

Sve u svemu, ovo je samo jedan primjer kako primijeniti znanje koje ste stekli u ovom članku na izglede iz stvarnog života.

prozirna pozadina sa css-om

Još jedna karakteristika koja se može implementirati pomoću css-a je prozirna pozadina. Odnosno, kroz ovu pozadinu će se moći vidjeti šta je iza toga.

Kao primjer, postavit ću pozadinu cijele stranice na sliku koju smo ranije koristili u primjerima. Za blok sa bg identifikatorom, na kojem provodimo sve naše eksperimente, postavićemo pozadinu koristeći format podešavanja boje rgba.

Kao što sam ranije rekao, u css-u postoji mnogo formata za postavljanje boja. Jedan od njih je rgb, 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 numerička od 0 do 255. Shodno 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, njeno ponavljanje horizontalno i okomito. Osim toga, koristeći CSS, možete postaviti pozadinsku sliku bilo gdje na ekranu koristeći pozicioniranje. Hajde da još ne bežimo daleko, idemo redom.

COLOR property

Ovo svojstvo postavlja boju elementa, preciznije, boju teksta unutar elementa. Vrijednost je data 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 postavljena ni za jedan element, vrijednost će biti naslijeđena od svog pretka. Ali može se dogoditi da nije postavljen ni za pretka - tada će se stilski list pretraživača primijeniti koristeći zadane vrijednosti. Boja elementa u ovom slučaju će vjerovatno biti crna.

Kao što sam već spomenuo, možete postaviti boju za skoro sve elemente, može biti (H1...H6), (jako, em) pa čak i cijele (p) pa čak i ivice tabele, ali o tome kasnije.

Evo primjera postavljanja boje teksta pomoću CSS-a:

h1 (boja: plava)

U ovom primjeru, svi naslovi prvog nivoa web stranice bit će plavi:

jaka (boja: crvena)

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

Može se napisati ovako:

h1, p, jak (boja: zelena)

Tada će naslovi prvog nivoa, svi paragrafi i sve što je označeno oznakom biti zeleno.

Kada je potrebno istaknuti naslove različitim bojama, koriste se selektori klasa. Atribut se koristi za definiranje klase u HTML-u klasa A koji se može primijeniti na bilo koji element. U HTML kodu morate napisati:

class="blue"> Boja naslova ovog razreda bit će plava

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

h1.Plava (boja: plava)

U HTML dokumentima se također koriste selektori po identifikatoru, oni su definirani atributom id. Identifikator je značajniji ili prioritetniji atribut 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 funte ( # ). Da biste koristili identifikator u HTML kodu, morat ćete napisati:

id="blue"> Boja naslova ovog identifikatora bit će plava

U tablici stilova zauzvrat:

h1#Plava (boja: plava)

BACKGROUND-BOJA svojstvo

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

tijelo (boja pozadine: aqua)

U ovom slučaju, pozadina stranice će biti tirkizna, a da bismo dali pozadinu naslovu, pišemo:

h1 (boja pozadine: žuta)

Dobijamo žutu pozadinu naslova prvog nivoa.

Boja i pozadina u CSS-u

Svojstvo BACKGROUND-REPEAT

Ovo svojstvo se koristi kada je postavljeno da odredi hoće li se ponavljati vodoravno i okomito. Važeće vrijednosti:

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

Kod je napisan ovako:

p(
pozadinska slika: url( adresa slikovne datoteke) ;
background-repeat : repeat-x
}

Tekst ovog pasusa bit će na vrhu pozadinske slike, koja će biti postavljena horizontalno.

POZADINA-PRILOG nekretnine

Ovo svojstvo se koristi da kaže pregledniku da li pozadinska slika stranice treba da se kreće s tekstom ( skrolujte) ili ostani miran ( fiksno).

tijelo (
pozadinska slika: url( adresa slikovne datoteke) ;
background-repeat : repeat-x ;
pozadinski prilog: fiksno
}

U tom slučaju, pozadinska slika će ostati fiksna.

POZICIJA-POZICIJA Nekretnina

Ovo svojstvo se koristi za pozicioniranje slike u odnosu na . Vrijednosti se postavljaju u procentima (%), u jedinicama dužine (cm, px), sa ključnim riječima:

• okomito:
• top- vrh slike je poravnat sa gornjom ivicom stranice ili bloka;
• centar
• dnu- dno slike je poravnato sa donjim rubom stranice ili bloka.
• Horizontalno:
• lijevo- lijevi rub slike je poravnat sa lijevom ivicom stranice ili bloka;
• centar- centar slike je poravnat sa sredinom stranice ili bloka;
• u pravu- desna ivica slike je poravnata sa desnom ivicom stranice ili bloka.

Pišemo primjer koda u procentima, jedinicama dužine i ključnim riječima:

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

tijelo (
pozadinska slika: url( adresa slikovne datoteke) ;
background-position : 10px 25cm
}

tijelo (
pozadinska slika: url( adresa slikovne datoteke) ;
background-position : gornji centar
}

Pozdrav, dragi čitaoci blog stranice. Danas ćemo pogledati pet CSS pravila koja vam omogućavaju da postavite pozadinu za bilo koji element u Html-u - background-position (slika, ponavljanje, boja, prilog). Pa, ne zaboravimo spomenuti 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 (zapamtite ga, što će vam 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 počnete proučavati stilsko označavanje od početka, odnosno od članka o tome šta je CSS i sa čime se jede, pa onda slijedite redoslijedom dat u priručniku. Iako, u svakom slučaju, na vama je, ali sada razgovarajmo o postavljanju pozadine.

Boja, boja pozadine i slika pozadine

Hajde da prvo vidimo kako se boja HTML elemenata postavlja pomoću css pravila boja. U stvari, ovdje je sve jednostavno. Sintaksa je potpuno normalna i možete podesiti boju u skladu sa načinom na koji je to urađeno u jeziku za označavanje hiperteksta. Kao što se sjećate, postavljeno iza znaka hash (heš - “#fe35a3”), ili uz pomoć tri cifre, ako se prva poklapa s vrijednošću druge, treća s četvrtom, dobro, odnosno petom, sa šestim (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 pasus istom bojom kao gore (#303). Sada se malo razlikuje od boje svih ostalih pasusa (tamnije), koja je postavljena na #555 u CSS datoteci WordPress teme koju koristim. Ali postavljanje boje kroz boju je prilično jednostavno, ali s pozadinom će biti malo složenije.

dakle, za pozadinu u css ispuniti pet pravila, koja se po želji mogu kombinovati u jedan tim. Da biste ih vidjeli, možete otići na trenutnu stranicu sa specifikacijama W3C i tamo potražiti nešto sa riječju Pozadina:

1. boja pozadine - ovo pravilo postavlja boju pozadine za bilo koji Html element. U njemu možete koristiti ili šifru ili naziv nijanse, tj. sve je tačno onako kako je bilo kada se koristi boja.

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

Ako pogledate specifikaciju, vidjet ćete to zadana boja pozadine bilo koji element će biti transparentan (podrazumevana vrijednost pravila je "background-color:transparent"). Istina, u elementima neće biti providno po defaultu, jer. to su elementi sistema i kod njih je sve drugačije i razlikuje se od običnih oznaka jezika za označavanje hiperteksta.

Boja u boji pozadine je standardno postavljena (šest ili tri heksadecimalne cifre, ili riječ):

Boja pozadine:#FEFCDE

Na primjer, pozadina ovog pasusa je postavljena precizno kroz boju pozadine sa kodom boje datim 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, tačno pozicionirati. Koja će se grafička datoteka koristiti može se odrediti pomoću pozadinska slika.

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

Background-image:url(https://site/image/comment_top_focus.gif);

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

One. kada se koristi samo jedno pravilo pozadinske slike koje specificira putanju do grafičke datoteke, ova slika će se reproducirati i okomito i horizontalno sve dok ne pokrije cijelo područje dodijeljeno na web stranici za ovaj specifični HTML element (u našem primjeru, to je bio stav). Zašto se ovo dešava?

Background-repeat - ponavljanje pozadinske slike

Da, jer nismo napisali nikakvu vrijednost za CSS pravilo background-repeat, što znači da će se za to koristiti zadana vrijednost. Gledajući specifikaciju, saznajemo da ova vrijednost odgovara "repeat" (ponavljanje slike u svim osama). Odgovor je došao sam od sebe.

Dakle, sa pozadinskim ponavljanjem možemo upravljajte ponavljanjima pozadinske slike. Ovo pravilo može imati samo četiri vrijednosti:




Background-position - pozicija pozadine

Sada se postavlja pitanje da li je moguće pomaknuti pozadinsku sliku dalje od gornjeg lijevog ugla područja koje ograničava veličinu elementa. Naravno, možete, a za tu svrhu postoji posebno pravilo pozadinska pozicija:



Gledajući CSS specifikaciju, postaje jasno zašto je podrazumevana pozadinska slika pritisnuta tačno do gornje leve ivice oblasti HTML elementa. Zato što je vrijednost "0% 0%" zadana za pravilo pozadinske pozicije.

Pa, kada ovo pravilo nije eksplicitno postavljeno za element (kao u našem slučaju), tada pretraživač bira njegovu vrijednost, što je prihvaćeno u zadanoj specifikaciji (napominjem da se koordinatne ose u CSS-u prijavljuju samo od gornjeg lijevog ruba elementa područja).

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

Prilikom postavljanja položaja pozadinske slike koristeći apsolutne jedinice background-position ima sljedeći princip za određivanje svoje konačne pozicije:

One. pretraživač će izračunati specificirane pomake duž X i Y osa od početka oblasti u kojoj je objekat pozicioniran do početka same slike. Na primjer, u ovom paragrafu sam pozicionirao pozadinsku sliku preko pozicije pozadine koristeći sljedeća CSS pravila:

Background-image:url(https://website/image/logo.png); background-repeat:no-repeat; background-position:400px 25px;

Imajte na umu da će u ovom slučaju biti poravnat sa središtem okvira za prikaz, a ne sa centrom područja rezerviranog za ove pasuse. Jasno je da je u stvarnosti malo vjerovatno da će se koristiti takvo postavljanje pozadinske slike.

Međutim, ako postavite fiksni položaj pozadine za elemente kao što su Body ili Html (tj. u tagovima koji pokrivaju cijelu web stranicu), tada će ova slika uvijek biti vidljiva u prozoru za prikaz i upravo to je upotreba CSS-a za priloge u pozadini. nekretnina modernog blokovskog rasporeda.

Ima li još Pozadina montažnog pravila, koji vam omogućava da kombinujete svih pet gore opisanih pravila u jednoj bočici. Štoviše, vrijednosti za svih pet u kombinovanoj 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 eksplicitno ne navedete pregledač će smatrati zadanom vrijednošću.

PNG) bez ponavljanja 50%;

Pravilo sklapanja prikazano u primjeru se primjenjuje na ovaj paragraf radi jasnoće. Nije ispalo lijepo, ali nije to poenta. Ovaj pasus koristi čudnu žutu boju pozadine i koristi sliku LiveInternet logotipa poravnatu sa središtem pasusa. Jer za pravilo pozadinskog priloga nije postavljena nikakva vrijednost, a zatim se koristi pomicanje (podrazumevano).

Ako za neki element želite postaviti samo ispunu bojom, a ne zamarati se pozadinskom slikom, to možete učiniti umjesto toga:

Boja pozadine:#FEFCDE

pisati:

Pozadina:#FEFCDE

Za sve ostale vrijednosti prefabricirano pravilo će biti uzeto po defaultu, a ovo je ono što vam je potrebno.

Sretno ti! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na

");">


Možda ste zainteresovani

Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu Kako promijeniti boju pozadine redova tabela, lista i drugih Html elemenata na web mjestu koristeći pseudo-klasu nth-child
Pozicija (apsolutna, relativna i fiksna) - načini pozicioniranja HTML elemenata u CSS-u (lijeva, desna, gornja i donja pravila)
Float i clear u CSS - alatima za raspored blokova
Pozicioniranje sa Z-indeksom i pravilom CSS kursora za promjenu kursora miša