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 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 (zapamtite, što će vam pomoći da otvorite sve detalje u svakom dizajnu).

Da vas još jednom podsjetim da je ovaj članak dio serije i najbolje bi bilo da prvo počnete sa učenjem označavanja stila, odnosno sa člankom o tome šta je CSS i sa čime se jede, pa, a zatim slijedite navedenim redoslijedom u referenci. 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 koristeći tri cifre, ako se prva poklapa sa vrijednošću druge, treća s četvrtom, dobro, a peti, respektivno, 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 pasus istom bojom kao gore (# 303). Sada se malo razlikuje od boje svih ostalih pasusa (tamnije), koja je postavljena kao # 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 postoji pet pravila koja se po želji mogu kombinovati u jedan tim. Da biste ih vidjeli, možete otići na stranicu trenutne specifikacije W3C konzorcija i tamo potražiti bilo š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 tome, jer će teške slike usporiti učitavanje stranice), put do koje će biti specificiran u funkcionalnosti url ().

Ako pogledate specifikacije, vidjet ćete to zadana boja pozadine bilo koji element će imati transparentan (podrazumevana vrijednost pravila je "background-color: transparent"). Međutim, u elementima će po defaultu biti netransparentan, jer ovo su sistemski elementi i oni imaju sve drugačije i drugačije od uobičajenih oznaka jezika za označavanje hiperteksta.

Boja u boji pozadine je standardno postavljena (šest ili tri cifre heksadecimalnog koda, 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, može se precizno pozicionirati. Koja će se grafička datoteka koristiti može se podesiti pomoću pozadinska slika.

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

Pozadinska slika: 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 cjelokupno područje predviđeno za ovaj paragraf prekriveno slikom koja se ponavlja, koja u originalu izgleda ovako:

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

Ponavljanje pozadine - 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, otkrivamo da ova vrijednost odgovara "repeat" (ponavljanje slike duž svih osa). 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 - pozicioniranje 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 da možete, a za tu svrhu postoji posebno pravilo background-position:



Gledajući CSS specifikaciju, postaje jasno zašto je podrazumevana pozadinska slika smeštena tačno na gornjoj levoj ivici oblasti HTML elementa. Zato što je vrijednost "0% 0%" zadana za pravilo pozadinske pozicije.

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

Iz specifikacije se također može vidjeti da se i relativne (procentne) i apsolutne vrijednosti (na primjer) mogu koristiti za pozicioniranje pozadinske slike koristeći background-position. Pa, možete koristiti i riječi koje će odgovarati određenim brojčanim vrijednostima. Ali prvo stvari.

Prilikom postavljanja pozicioniranja pozadinske slike koristeći apsolutne jedinice u pozadinskoj poziciji odvija se sljedeći princip određivanja njegove 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 u smislu pozicije pozadine koristeći sljedeća CSS pravila:

Pozadinska slika: url (https: //site/image/logo.png); background-repeat: bez ponavljanja; 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 dodijeljenog ovim paragrafima. Jasno je da u stvarnosti takav raspored pozadinske slike vjerojatno neće naći primjenu.

Međutim, ako postavite fiksnu pozadinu 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, a to je upravo ono što CSS svojstvo pozadinskog priloga nalazi u modernom blokovskom rasporedu.

Ima li još montažno pravilo Pozadina, koji vam omogućava da kombinujete 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 pretraživač ih neće brkati jedna s drugom). Sve što ne navedete eksplicitno, pretraživač će smatrati jednakim zadanoj vrijednosti.

PNG) bez ponavljanja 50%;

Pravilo sklapanja prikazano u primjeru se primjenjuje na ovaj paragraf radi jasnoće. Ispalo je da nije lijepo, ali to nije glavna stvar. Za ovaj pasus koristi se čudna žuta pozadina, kao i slika LiveInternet logotipa, poravnata sa središtem pasusa. Jer nije navedena vrijednost za pravilo pozadinskog priloga, 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 kombinovano pravilo će biti uzeto po defaultu, a ovo je ono što vam je potrebno.

Sretno ti! Vidimo se uskoro na stranicama blog stranice

možete pogledati više video zapisa ako odete na

");">


Možda ste zainteresovani

Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu Kako postaviti naizmjeničnu 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 (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 kursora miša

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. Nemojmo još bježati predaleko, idemo redom.

COLOR property

Ovo svojstvo postavlja boju elementa, preciznije, 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 specificirana ni za jedan element, vrijednost će biti naslijeđena od svog pretka. Ali može se ispostaviti da nije specificirano ni za pretka - tada će se lista stilova pretraživača primijeniti koristeći zadane vrijednosti. Boja elementa u ovom slučaju će najvjerovatnije 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 cijeli brojevi (p) pa čak i ivice tablice, ali o tome kasnije.

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

h1 (boja: plava)

U ovom primjeru, sva zaglavlja prvog nivoa 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, ć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, tada se koriste selektori klasa. Da biste definirali klasu u HTML-u, koristite atribut klasa koji se može primijeniti na bilo koji element. U HTML kodu ćete morati napisati:

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

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

h1.Plava (boja: plava)

U HTML dokumentima se koriste i selektori identifikatora, oni su određeni atributom id... 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 heš znakom ( # ). Da biste koristili identifikator u HTML kodu, morat ćete napisati:

id = "Plavo"> Boja zaglavlja ovog ID-a će biti plava

U tablici stilova, zauzvrat:

h1 # Plava (boja: plava)

BACKGROUND-BOJA Nekretnine

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 biste dali pozadinu naslovu, napišite:

h1 (boja pozadine: žuta)

Dobijamo žutu pozadinu naslova prvog nivoa.

CSS boja i pozadina

BACKGROUND-REPEAT Svojstvo

Ovo svojstvo se koristi kada se daje da se odredi da li se ponavlja horizontalno i vertikalno. Važeće vrijednosti:

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

Kod je napisan ovako:

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

Tekst za ovaj paragraf će biti na vrhu pozadinske slike, koja će biti postavljena horizontalno.

POZADINA-PRILOG Nekretnina

Ovo svojstvo se koristi da kaže pretraživaču da li pozadinska slika stranice treba da se pomera sa tekstom ( skrolujte) ili ostati nepomičan ( fiksno).

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

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

POZICIJA-POZICIJA Nekretnina

Ovo svojstvo se koristi za pozicioniranje slike u odnosu na. Vrijednosti su navedene u procentima (%), u jedinicama dužine (cm, px), po 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 (
background-image: url ( adresa slikovne datoteke) ;
pozadinski položaj: 0% 0%
}

tijelo (
background-image: url ( adresa slikovne datoteke) ;
pozadinski položaj: 10px 25cm
}

tijelo (
background-image: url ( adresa slikovne datoteke) ;
pozadinski položaj: gornji centar
}

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 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 iu 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 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 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 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. 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 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 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 na X-osi i Y-osi do ivica elementa (ako je pozadina manja od elementa). U svojstvu možete odrediti postavku tako da se slike ponavljaju samo duž X ose - repeat-x (horizontalno), samo duž Y - repeat-y (vertikalno), ili nikako - bez ponavljanja.

#content (

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

background-attachment- fiksira pozadinu u jednoj poziciji, odnosno slika će se pomicati zajedno sa sadržajem bloka ili će ostati fiksna. Podrazumevano je skrolovanje, š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 lokaciju * ​​/
}

background-position- svojstvo koje postavlja poziciju pozadine u elementu. Date su dvije vrijednosti: horizontalni položaj, a zatim vertikalni položaj. Postavlja se ili digitalno (pikseli i procenti) ili slovima (lijevo, u sredini, 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 (
pozadinski položaj: lijevo centar; / * vodoravno - na lijevoj strani, okomito - u sredini * /
}
Mislim da je sve jasno u komentarima)
Primjer pisanja numeričke vrijednosti:

#ključevi (
background-position: 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.

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 profesionalcima. Ovakvo pisanje će smanjiti vrijeme učitavanja stranice i prikazivanje u pretraživaču. Imajte sažaljenja prema posjetiocima, bolje je zapisati na ovaj način, ako vam, naravno, treba više nekretnina.
Da, možete preskočiti bilo koju nekretninu ako za to nema potrebe! Samo nastavljate da navodite 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 veličinu bloka, jer će se u suprotnom veličina promijeniti u skladu sa sadržajem.

kratke informacije

CSS verzije

Vrijednosti

url Vrijednost je putanja do grafičke datoteke, koja je navedena unutar url () konstrukcije. U ovom slučaju, putanja do datoteke može biti napisana u navodnicima (dvostrukim ili jednostrukim) ili bez njih. none Otkazuje pozadinsku sliku za element. inherit Nasljeđuje vrijednost od roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektni model

document.getElementById ("elementID") .style.backgroundImage

Pregledači

Internet Explorer 7.0 ili noviji primjenjuje pozadinu na unutrašnjost ivice elementa koji ima postavljeno svojstvo hasLayout. Ako element nema hasLayout, svojstvo background-image će poštovati granice elementa kako je navedeno u specifikaciji. Razlika u prikazu će biti uočljiva ako su granice isprekidane ili tačkaste, a ne pune.

Ako je element postavljen na pomicanje ili automatski, Internet Explorer 8 će imati vertikalno kašnjenje od jednog piksela kada se pozadina pomiče.

Internet Explorer do i uključujući verziju 7.0 ne podržava naslijeđenu vrijednost.

Ako je pozadina postavljena za red tabele (tag ), tada ga Chrome, Safari, iOS ne prikazuju kako je propisano specifikacijom, odnosno za svaku ćeliju posebno. Dok bi pretraživač trebao prikazati čvrstu pozadinu za cijeli red. Primjer 2 pokazuje kod za demonstraciju greške.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Rezultat ovog primjera u pregledniku Chrome prikazan je na Sl. 1. Pregledač Internet Explorer, Opera i Firefox ispravno prikazuju pozadinu linije (slika 2).

Rice. 1. Ponavljanje pozadine za svaku ćeliju

Rice. 2. Pozadina za cijelu liniju

Mislim da ne postoji nijedna lokacija na kojoj se imovina ne koristi CSS pozadina... Čini se da šta može biti jednostavnije od ove imovine? Ali ne, njegove mogućnosti su mnogo šire od uobičajene namjene slike ili boje kao pozadine stranice. Nešto će biti poznato, ali će za mnoge sigurno nešto postati novitet. U svakom slučaju, bit će korisno dobro znati kako pozadina funkcionira.

CSS3 je doneo mnogo novih stvari u svojstvo, to je transparentnost i dodeljivanje 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 korištenjem nekoliko vrsta zapisa: regularnog (koristi se naziv boje), heksadecimalne ili RGB zapisa. Svaka vrsta je jednaka, koristite koju vam se najviše sviđa. Trudim se da koristim 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 cifra je postavljena 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ćava 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 postavlja na prethodnu. Zašto bi ovo moglo biti korisno? Sve je prilično jednostavno - recimo da trebate pričvrstiti male stvari u svaki kut stranice. Pod uslovom da je raspored manje-više tečan, upotreba jedne slike nije opcija. Dakle, napravimo 4 "sloja", svaku sliku pomerimo 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 imati na umu dva pravila:

• postavite kontrastnu boju pozadine u slučaju da korisnik iz nekog razloga ne može prikazati sliku. Može isključiti otrcano prikazivanje 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 dovoljno široka. Svi pretraživači, čak i IE8, podržavaju ovo svojstvo.