Jedna z najčastejších úloh pri úprave textu a blokov v HTML a CSS. Môže sa s ňou stretnúť nielen dizajnér layoutu, ale aj každý správca obsahu, ktorý upravuje obsah stránky. Na vyriešenie tohto problému sa používajú iba dve vlastnosti: farba - farba textu, pozadie - práca s pozadím, farba alebo obrázok.

Práca s testovacou farbou v CSS

farba je vlastnosť, ktorá je potrebná na určenie farby len pre text. Farbu je možné špecifikovať vo formáte HTML HEX kódu aj vo formáte RGB (Red Green Blue). Farebné kódy je možné vybrať buď v grafických programoch, ako je Photoshop alebo online

Syntax vlastníctva:

Farba: Farba;
Teraz použijeme vlastnosť:

obsah (
farba: # 444; // tmavosivý text v prvku s obsahom triedy
}
Prečo takýto príklad: určenie farby pre odkaz a pre text sú dve rôzne veci. Pamätaj. No a svojpomocne odporúčam vyrobiť farbu textu a odkazy rôznych farieb.

Práca s pozadím v CSS

pozadie je vlastnosť, ktorá umožňuje pracovať s pozadím obrázka: nastaviť farbu pozadia, nastaviť obrázok ako pozadie (formáty jpg, gif, png), zmeniť polohu pozadia a ďalšie parametre, ktoré sú popísané nižšie.

farba pozadia- táto vlastnosť sa používa iba na nastavenie farby pozadia. Akceptuje iba farebný kód. Farbu je možné zadať vo formáte RGB (Red Green Blue) alebo vo formáte HTML HEX kódu.

Blokovať (
farba pozadia: # fbb5b5; // nastavte pastelovú šarlátovú farbu pozadia
}
Najlepšie príklady farieb pozadia (modely moderného dizajnu: Flat Design atď.):

obrázok na pozadí je vlastnosť, ktorá sa používa na nastavenie nejakého obrázka ako pozadia v prvku. Na určenie obrázku stačí parameter url a cesta k obrázku vzhľadom k súboru s css-štýlmi.

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

pozadie-opakovať- možno použiť len vtedy, keď bola vlastnosť background-image špecifikovaná vyššie. Táto vlastnosť nastavuje pravidlo opakovania obrázka. V predvolenom nastavení sa obrázok opakuje na osi X a osi Y až po okraje prvku (ak je pozadie menšie ako prvok). Vo vlastnosti si môžete určiť nastavenie tak, aby sa obrázky opakovali len pozdĺž osi X - repeat-x (horizontálne), len pozdĺž Y - repeat-y (vertikálne), alebo vôbec - no-repeat.

#content (

background-repeat: repeat-x; / * obraz sa bude opakovať iba horizontálne až po hranice bloku * /
}

pozadie-príloha- fixuje pozadie v jednej polohe, to znamená, že obrázok sa bude posúvať spolu s obsahom bloku alebo zostane pevný. Predvolená hodnota je posúvanie, ktoré nefixuje polohu pozadia.

#content (
background-image: url ("background.jpg");
background-repeat: repeat-x; / * obraz sa bude opakovať iba horizontálne * /
pozadie: pevné; / * pripnuté na umiestnenie * /
}

pozícia na pozadí- vlastnosť, ktorá nastavuje polohu pozadia v prvku. Uvádzajú sa dve hodnoty: horizontálna poloha a potom vertikálna poloha. Nastavuje sa buď digitálne (pixely a percentá) alebo písmenami (vľavo, v strede, vpravo, hore, dole). Táto vlastnosť je potrebná, keď sa obrázok neopakuje (no-repeat) a pozadie musí byť v prvku umiestnené určitým spôsobom.

#blok (
pozícia na pozadí: ľavý stred; / * horizontálne - na ľavej strane, vertikálne - v strede * /
}
Myslím, že v komentároch je všetko jasné)
Príklad zápisu číselnej hodnoty:

#klávesy (
background-position: 109px 57px; / * ľavý okraj 109 pixelov, horný 57 pixelov * /
}
Aj tu si myslím, že by malo byť všetko jasné.
Veľa nehnuteľností? Pozrite sa, ako písať v skrátenej forme.

Nakoniec. CSS skratka pre pozadie

Môžete použiť skrátený zápis, kde budú všetky parametre uvedené v riadku:

Pozadie: pozícia opakovania farebného obrázka;

O profíkoch. Takéto písanie zníži časy načítania stránky a vykresľovanie prehliadača. Zľutujte sa nad návštevníkmi, radšej si takto zapíšte, ak, samozrejme, potrebujete viacero nehnuteľností.
Áno, môžete preskočiť akúkoľvek vlastnosť, ak ju nepotrebujete! Pokračujte v zadávaní hodnôt nižšie v zozname.

Blokovať (
pozadie: # f1f1f1 url ("pozadie.jpg") repeat-x scroll 100px 125px;
}

Príklad toho, ako fungujú pozadia v CSS

Príklad kódu. Výsledok práce a zdrojový kód si môžete pozrieť na odkaze nižšie.

V prípade obrázka na pozadí je lepšie určiť veľkosť bloku, pretože inak sa veľkosť zmení podľa obsahu.

Dobrý deň, milí čitatelia blogu. Dnes sa pozrieme na päť CSS pravidiel, ktoré umožňujú nastaviť pozadie pre akýkoľvek prvok v Html – background-position (obrázok, opakovanie, farba, príloha). No, nezabudnime spomenúť aj zložené pravidlo pozadia.

Na tom nie je nič ťažké, ale existujú určité jemnosti a nuansy, ktoré potrebujete vedieť o hotovej šablóne (nezabudnite, že vám to pomôže otvoriť všetky detaily akéhokoľvek dizajnu).

Ešte raz vám pripomeniem, že tento článok je súčasťou série a najlepšie by bolo začať sa učiť značkovanie štýlov od začiatku, a to článkom o tom, čo je CSS a čím sa žerie, no a potom poradie uvedené v referencii. Aj keď je to v každom prípade na vás, ale teraz si povieme niečo o nastavení pozadia.

Farba, farba pozadia a obrázok pozadia

Najprv sa pozrime, ako sa nastavuje farba prvkov Html pomocou Pravidlá farieb CSS... V skutočnosti je tu všetko jednoduché. Syntax je úplne normálna a môžete nastaviť farbu podľa toho, ako bola vykonaná v hypertextovom značkovacom jazyku. Ako si pamätáte, umiestnite za znakom hash (hash - "# fe35a3") alebo pomocou troch číslic, ak sa prvá zhoduje s hodnotou druhej, tretia so štvrtou, dobre a piata so šiestym (kód farby "# aa33ff" môže byť skrátený ako "a3f").

Farby v kóde Html a CSS môžu byť vyjadrené aj ako slová (napríklad „červená“), ale najčastejšie sa používa hexadecimálny kód:

Farba: #303

Ako príklad som vyfarbil tento malý odsek rovnakou farbou ako vyššie (# 303). Teraz je mierne odlišná od farby všetkých ostatných odsekov (tmavšia), ktorá je nastavená ako # 555 v súbore CSS témy WordPress, ktorú používam. Ale nastavenie farby cez farbu je celkom jednoduché, no s pozadím to bude trochu zložitejšie.

takze pre pozadie v css existuje päť pravidiel, ktoré je možné v prípade potreby spojiť do jedného tímu. Ak ich chcete vidieť, môžete prejsť na stránku aktuálnej špecifikácie konzorcia W3C a vyhľadať tam čokoľvek so slovom Background:

1. farba pozadia – toto pravidlo nastavuje farbu pozadia pre akýkoľvek prvok Html. V ňom môžete použiť buď kód alebo názov odtieňa, t.j. všetko je presne také ako pri použití farby.

obrázok na pozadí - s ním môžete použiť obrázok ako pozadie (ale o tom si určite prečítajte, pretože ťažké obrázky spomalia načítanie stránky), cesta ku ktorej bude špecifikovaná vo funkcii url ().

Ak sa pozriete na špecifikáciu, uvidíte to predvolená farba pozadia každý prvok bude mať transparentný (predvolená hodnota pravidla je "background-color: transparent"). V prvkoch to však bude štandardne netransparentné, od r toto sú systémové prvky a majú všetko inak a inak ako bežné značky hypertextového značkovacieho jazyka.

Farba pozadia je štandardne nastavená (šesť alebo tri číslice hexadecimálneho kódu alebo slovo):

Farba pozadia: #FEFCDE

Napríklad pozadie tohto odseku je nastavené presne pomocou farby pozadia s farebným kódom uvedeným vyššie.

Všetky ostatné štyri pravidlá CSS sa budú vzťahovať iba na obrázok na pozadí, ktorý je možné nastaviť pre akýkoľvek prvok Html a v prípade potreby ho možno presne umiestniť. Ktorý grafický súbor sa použije, je možné nastaviť pomocou obrázok na pozadí.

Ak sa pozriete na špecifikáciu jazyka značkovacieho štýlu, uvidíte, že predvolený obrázok na pozadí je "žiadny" (tj nepoužíva sa žiadny obrázok na pozadí). Ak to stále potrebujete, musíte vo funkčnej adrese URL () zadať cestu k nej:

Obrázok na pozadí: url (https: //site/image/comment_top_focus.gif);

Napríklad pre tento odsek som použil grafický súbor s pozadím, ktorého cesta je popísaná vyššie. Môžete vidieť, že celá oblasť vyhradená pre tento odsek je pokrytá opakujúcim sa obrázkom, ktorý v origináli vyzerá takto:

Tie. pri použití iba jedného pravidla obrázka na pozadí označujúceho cestu ku grafickému súboru sa práve tento obrázok znásobí vertikálne aj horizontálne, kým nepokryje celú oblasť pridelenú na webovej stránke pre tento konkrétny prvok HTML (v našom príklade to bol odstavec). Prečo sa to deje?

Background-repeat - opakujte obrázok na pozadí

Áno, pretože sme nenapísali žiadnu hodnotu pre pravidlo CSS. pozadie-opakovať, čo znamená, že sa preň použije predvolená hodnota. Pri pohľade na špecifikáciu zistíme, že táto hodnota zodpovedá "repeat" (opakovanie obrazu pozdĺž všetkých osí). Odpoveď prišla sama.

Preto s opakovaním na pozadí môžeme spravovať opakovania obrázka na pozadí... Toto pravidlo môže mať iba štyri hodnoty:




Background-position - umiestnenie pozadia

Teraz vyvstáva otázka, či je možné posunúť obrázok na pozadí od ľavého horného rohu oblasti obmedzujúcej veľkosť prvku. Samozrejme, že môžete a na tento účel existuje samostatné pravidlo pozícia na pozadí:



Pri pohľade na špecifikáciu CSS je jasné, prečo je predvolený obrázok na pozadí vložený presne do ľavého horného okraja oblasti prvku Html. Pretože hodnota "0% 0%" je predvolená pre pravidlo pozície na pozadí.

No, keď toto pravidlo nie je explicitne nastavené pre prvok (ako v našom prípade), prehliadač vyberie jeho hodnotu, ktorá je štandardne akceptovaná v špecifikácii (všimnite si, že súradnicové osi v CSS sú hlásené len z ľavého horného okraja plošný prvok).

Zo špecifikácie je tiež zrejmé, že relatívne (percentá) aj absolútne hodnoty (napríklad) možno použiť na umiestnenie obrázka na pozadí pomocou pozície pozadia. Môžete použiť aj slová, ktoré budú zodpovedať určitým číselným hodnotám. Ale najprv to.

Pri nastavovaní umiestnenia obrázka na pozadí pomocou absolútnych jednotiek v pozícií na pozadí sa uplatňuje nasledujúci princíp určenia jej konečnej polohy:

Tie. prehliadač vypočíta určené posuny pozdĺž osí X a Y od začiatku oblasti, v ktorej je objekt umiestnený, až po začiatok tohto obrázka. Napríklad v tomto odseku som umiestnil obrázok na pozadí z hľadiska pozície pozadia pomocou nasledujúcich pravidiel CSS:

Obrázok na pozadí: url (https: //site/image/logo.png); background-repeat: no-repeat; background-position: 400px 25px;

Upozorňujeme, že v tomto prípade bude zarovnaný na stred výrezu, a nie na stred oblasti vyhradenej pre tieto odseky. Je zrejmé, že v skutočnosti takéto usporiadanie obrázka na pozadí pravdepodobne nenájde uplatnenie.

Ak však nastavíte pevnú pozíciu pozadia pre prvky ako Body alebo Html (teda v značkách, ktoré pokrývajú celú webovú stránku), potom bude tento obrázok vždy viditeľný vo výreze, a to je presne to, čo CSS vlastnosť background-attachment nachádza v modernom blokovom usporiadaní.

Je tam ešte nejaké prefabrikované pravidlo Pozadie, ktorá umožňuje spojiť všetkých päť vyššie popísaných pravidiel v jednej fľaši. Navyše hodnoty pre všetkých päť v prefabrikovanej verzii je možné použiť v ľubovoľnom poradí a v akomkoľvek množstve (sú jedinečné a prehliadač si ich navzájom nezamieňa). Čokoľvek, čo explicitne nešpecifikujete, bude prehliadač považovať za rovnaké ako predvolená hodnota.

Png) bez opakovania 50 %;

Na tento odsek sa kvôli prehľadnosti použije pravidlo zostavy uvedené v príklade. Ukázalo sa, že to nie je krásne, ale to nie je hlavná vec. Pre tento odsek je použitá zvláštna žltá výplň pozadia, ako aj obrázok loga LiveInternet, zarovnaný na stred odseku. Pretože nie je zadaná žiadna hodnota pre pravidlo pripojenia na pozadí, potom sa použije predvolená hodnota rolovania.

Ak chcete pre niektorý prvok nastaviť iba výplň farbou a neobťažovať sa s obrázkom na pozadí, môžete namiesto toho:

Farba pozadia: #FEFCDE

napíš:

Pozadie: #FEFCDE

Pre všetky ostatné hodnoty sa bude štandardne brať kombinované pravidlo, a to je to, čo ste potrebovali.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

ďalšie videá si môžete pozrieť na stránke

");">


Možno vás bude zaujímať

Štýl zoznamu (typ, obrázok, pozícia) – CSS pravidlá pre prispôsobenie vzhľadu zoznamov v Html kóde Ako nastaviť striedajúcu sa farbu pozadia riadkov tabuliek, zoznamov a iných prvkov Html na lokalite pomocou pseudotriedy n-tého potomka
Pozícia (absolútna, relatívna a pevná) - spôsoby umiestnenia prvkov Html v CSS (pravidlá vľavo, vpravo, hore a dole)
Float and clear in CSS - block layout tools
Umiestňovanie pomocou Z-indexu a pravidla kurzora CSS na zmenu kurzora myši

S pomocou CSS farba a pozadie môžete nastaviť takmer akýkoľvek prvok webovej stránky, ľubovoľne ovládať obrázok na pozadí, jeho opakovanie horizontálne aj vertikálne. Okrem toho pomocou CSS môžete umiestniť obrázok na pozadie kdekoľvek na obrazovke pomocou polohovania. Neutekajme ešte ďaleko, poďme po poriadku.

Vlastnosť COLOR

Táto vlastnosť nastavuje farbu prvku, konkrétnejšie farbu textu vo vnútri prvku. Hodnota je uvedená v jednej z možných foriem:

• názov farby (ZELENÁ, ČIERNA, ČERVENÁ ...);
• hexadecimálny kód farby (008000, 000000, FF0000 ...);
• desiatkový farebný kód v RGB (farba: rgb (40, 175, 250));

Vlastnosť COLOR je dedená a ak pre žiadny prvok nie je zadaná hodnota, hodnota sa zdedí od svojho predka. Môže sa však ukázať, že nie je zadaný ani pre predchodcu - potom sa použije šablóna so štýlmi prehliadača s predvolenými hodnotami. Farba prvku v tomto prípade bude s najväčšou pravdepodobnosťou čierna.

Ako som už spomenul, farbu môžete nastaviť takmer pre všetky prvky, môže to byť (H1 ... H6), (silné, em) a dokonca aj celé čísla (p) a dokonca aj okraje tabuľky, ale o tom neskôr.

Pozrime sa na príklad nastavenia farby textu pomocou CSS:

h1 (farba: modrá)

V tomto príklade budú všetky hlavičky prvej úrovne webovej stránky modré:

silný (farba: červená)

V tomto prípade bude všetko, čo je v texte stránky, zvýraznené značkou silný, zmení farbu na červenú.

Dá sa to napísať takto:

h1, p, silné (farba: zelená)

Potom budú nadpisy prvej úrovne, všetky odseky a všetko, čo je zvýraznené značkou, zelené.

Keď je potrebné zvýrazniť nadpisy rôznymi farbami, použijú sa selektory tried. Ak chcete definovať triedu v HTML, použite atribút trieda ktoré možno použiť na akýkoľvek prvok. V HTML kóde budete musieť napísať:

trieda = "Modrá"> Farba hlavičiek tejto triedy bude modrá

V šablóne štýlov CSS v tomto prípade napíšeme pravidlo, kde selektorom bude prvok H1 a cez bodku ( . ) názov triedy:

h1.Blue (farba: modrá)

V HTML dokumentoch sa používajú aj selektory identifikátorov, sú určené atribútom id... Identifikátor je dôležitejší alebo prioritnejší ako trieda. A ak sú v kóde HTML pre prvok špecifikované trieda aj identifikátor, použije sa štýl identifikátora. Identifikátor je označený znakom hash ( # ). Ak chcete použiť identifikátor v kóde HTML, musíte napísať:

id = "Modrá"> Farba hlavičiek tohto ID bude modrá

V šablóne štýlov postupne:

h1 # Modrá (farba: modrá)

Nehnuteľnosť s farbou pozadia

Táto vlastnosť vám umožňuje nastaviť farbu pozadia pre stránku ako celok, odsek, odkaz, všeobecne pre akýkoľvek HTML prvok. Na tento účel je v hodnote vlastnosti špecifikovaná farba alebo hodnota. transparentný(priehľadné). Kód pre pozadie stránky je napísaný:

telo (farba pozadia: aqua)

V tomto prípade bude pozadie stránky tyrkysové a ak chcete dať pozadie nadpisu, napíšte:

h1 (farba pozadia: žltá)

Získame žlté pozadie nadpisov prvej úrovne.

CSS farba a pozadie

Vlastnosť OPAKOVANIA POZADIA

Táto vlastnosť sa používa na určenie, či sa opakuje horizontálne a vertikálne. Platné hodnoty:

• opakovať- obraz sa opakuje vertikálne a horizontálne;
• repeat-x- obraz sa opakuje iba vodorovne;
• opakovať-y- obraz sa opakuje iba vertikálne;
• bez opakovania- obraz sa neopakuje.

Kód je napísaný takto:

p (
obrázok na pozadí: url ( adresa súboru obrázka) ;
background-repeat: repeat-x
}

Text tohto odseku bude v hornej časti obrázka na pozadí, ktorý bude umiestnený vodorovne.

POZADIE-PRÍLOHA Vlastnosť

Táto vlastnosť sa používa na informovanie prehliadača, či sa má obrázok na pozadí stránky posúvať s textom ( rolovať) alebo zostať nehybne ( pevné).

telo (
obrázok na pozadí: url ( adresa súboru obrázka) ;
background-repeat: repeat-x;
pozadie: pevné
}

V tomto prípade zostane obrázok na pozadí nehybný.

POZADIE - POZÍCIA Nehnuteľnosť

Táto vlastnosť sa používa na umiestnenie obrázka vzhľadom na. Hodnoty sú uvedené v percentách (%), v jednotkách dĺžky (cm, px), podľa kľúčových slov:

• Vertikálne:
• top- horná časť obrázka je zarovnaná s horným okrajom stránky alebo bloku;
• stred
• dno- spodná časť obrázka je zarovnaná so spodným okrajom stránky alebo bloku.
• Vodorovne:
• vľavo- ľavý okraj obrázka je zarovnaný s ľavým okrajom stránky alebo bloku;
• stred- stred obrázka je zarovnaný na stred stránky alebo bloku;
• správny- pravý okraj obrázka je zarovnaný s pravým okrajom stránky alebo bloku.

Príklad kódu píšeme v percentách, jednotkách dĺžky a kľúčových slovách:

telo (
obrázok na pozadí: url ( adresa súboru obrázka) ;
pozícia na pozadí: 0% 0%
}

Telo (
obrázok na pozadí: url ( adresa súboru obrázka) ;
Pozícia pozadia: 10px 25cm
}

Telo (
obrázok na pozadí: url ( adresa súboru obrázka) ;
pozadie-pozícia: hore v strede
}

Od autora: Vítam všetkých. Farby pozadia a obrázky zohrávajú pri webdizajne obrovskú úlohu, pretože umožňujú atraktívnejšiu prezentáciu akéhokoľvek prvku. Dnes sa pozrieme na to, ako urobiť pozadie v html.

Dá sa vystačiť s html pri nastavovaní pozadia?

Hneď vám poviem, že nie. Vo všeobecnosti html nie je určené na štýl webových stránok. Je to len veľmi nepohodlné. Existuje napríklad atribút bgcolor, pomocou ktorého môžete nastaviť farbu pozadia, čo je však veľmi nepohodlné.

Podľa toho použijeme kaskádové štýly (css). Možností nastavenia pozadia je oveľa viac. Dnes si rozoberieme tie najzákladnejšie.

Ako nastavím pozadie cez css?

Najprv sa teda musíte rozhodnúť, ktorý prvok potrebujete na nastavenie pozadia. To znamená, že musíme nájsť selektor, do ktorého budeme pravidlo zapisovať. Napríklad, ak je potrebné nastaviť pozadie pre celú stránku ako celok, môžete to urobiť pomocou selektora tela pre všetky bloky - prostredníctvom selektora div. No atď. Pozadie môže a malo by byť viazané na akékoľvek iné selektory: triedy štýlu, identifikátory atď.

Potom, čo ste sa rozhodli pre selektor, musíte napísať názov samotnej nehnuteľnosti. Ak chcete nastaviť farbu pozadia (len plnú farbu, nie prechod alebo obrázok), použite vlastnosť background-color. Za ním musíte vložiť dvojbodku a napísať samotnú farbu. Dá sa to urobiť rôznymi spôsobmi. Napríklad pomocou kľúčových slov, hexadecimálneho kódu, formátov rgb, rgba, hsl. Postačí akákoľvek metóda.

Najčastejšie používanou metódou je hexadecimálny kód. Na výber farieb môžete použiť program, v ktorom je kód farby viditeľný. Napríklad photoshop, farba alebo nejaký online nástroj. Podľa toho napríklad napíšem všeobecné pozadie pre celú webovú stránku.

telo (farba pozadia: # D4E6B3;)

Tento kód je potrebné vložiť do sekcie hlavy. Je dôležité, aby boli súbory v rovnakom priečinku.

Obrázok ako pozadie

Ako obrázok použijem malú ikonu jazyka html:

Vytvorme prázdny blok s identifikátorom:

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

Dajme tomu explicitné rozmery a pozadie:

#bg (šírka: 400px; výška: 250px; obrázok na pozadí: url (html.png);)

#bg ( šírka: 400px; výška: 250px; pozadie - obrázok: url (html. png);

Z tohto kódu môžete vidieť, že som použil novú vlastnosť - background-image. Je určený práve na vloženie obrázka ako pozadia pre html prvok. Pozrime sa, čo sa stalo:

Ak chcete nastaviť obrázok, musíte zadať kľúčové slovo url za dvojbodkou a potom zadať cestu k súboru v zátvorkách. V tomto prípade je cesta špecifikovaná na základe skutočnosti, že obrázok je v rovnakom priečinku ako html dokument. Musíte tiež určiť pomer strán.

Ak ste to urobili a pozadie sa v bloku stále nezobrazuje, znova skontrolujte, či ste názov obrázka napísali správne, či ste správne zadali cestu a príponu. Toto sú najčastejšie dôvody, prečo sa pozadie jednoducho nezobrazuje, pretože prehliadač nemôže nájsť obrázok.

Všimli ste si však jednu zvláštnosť? Prehliadač vzal a reprodukoval obrázok v celom bloku. Takže, aby ste vedeli, toto je predvolené správanie obrázkov na pozadí - opakujú sa vertikálne a horizontálne, kým sa nezmestia do bloku. Toto správanie môžete ľahko ovládať. Na to použite vlastnosť background-repeat, ktorá má 4 hlavné hodnoty:

Repeat – predvolená hodnota, obrázok sa opakuje na oboch stranách;

Repeat-x - opakuje sa len pre ois x;

Repeat-y - opakuje sa iba pozdĺž osi y;

No-repeat – neopakuje sa vôbec;

Môžete napísať každú hodnotu a uvidíte, čo sa stane. Napíšem to takto:

background-repeat: repeat-x;

pozadie - opakovať: opakovať - ​​x;

Teraz opakujte iba vodorovne. Ak pridáte neopakovanie, bude tam iba jeden obrázok.

Skvelé, toto už môžete dokončiť, keďže toto sú základné možnosti práce s pozadím, ale ukážem vám ešte 2 vlastnosti, ktoré vám umožnia získať nad ním väčšiu kontrolu.

Pri opakovaní návrhári rozloženia použili na dosiahnutie textúr na pozadí a prechodov pomocou jedného malého obrázka. Mohlo to byť 30 x 10 pixelov alebo menej. Možno trochu viac. Obraz bol taký, že keď sa opakoval na jednej alebo dokonca na oboch stranách, neboli viditeľné žiadne prechody, takže v dôsledku toho sa získalo jediné pevné pozadie. Mimochodom, tento prístup sa teraz oplatí použiť, ak chcete na svojom webe použiť ako pozadie súvislú textúru. Dnes sa už gradient dá implementovať pomocou metód css3, o tom si určite povieme.

Pozícia pozadia

V predvolenom nastavení bude obrázok na pozadí, ak nie je nastavený na opakovanie, v ľavom hornom rohu jeho bloku. Pozíciu je však možné jednoducho zmeniť pomocou vlastnosti background-position.

Môžete sa ho opýtať rôznymi spôsobmi. Jednou z možností je jednoducho uviesť strany, na ktorých by mal byť obrázok umiestnený:

pozícia na pozadí: vpravo hore;

pozadie - poloha: vpravo hore;

To znamená, že vertikálne zostalo všetko rovnaké: obrázok na pozadí sa nachádza navrchu, ale vodorovne sme zmenili stranu vpravo, teda vpravo. Ďalším spôsobom nastavenia pozície je percentuálny podiel. V tomto prípade sa odpočítavanie v každom prípade začína od ľavého horného rohu. 100% - celý blok. Aby sme teda umiestnili obrázok presne do stredu, píšeme takto:

pozícia pozadia: 50 % 50 %;

pozadie - pozícia: 50% 50%;

Nezabudnite na jednu dôležitú vec týkajúcu sa polohovania – prvým parametrom je vždy horizontálna poloha a druhým je vertikálna poloha. Ak teda uvidíte hodnotu 80% 20%, potom môžete okamžite usúdiť, že obrázok na pozadí bude výrazne posunutý doprava, ale nepôjde veľmi dole.

A nakoniec môžete zapísať polohu v pixeloch. Všetko je rovnaké, len namiesto %. V niektorých prípadoch môže byť potrebné aj toto umiestnenie.

Skrátený zápis

Súhlaste s tým, že kód sa ukáže byť dosť ťažkopádny, ak je všetko nastavené tak, ako sme to urobili. Ukazuje sa, že musí byť nastavená cesta k obrázku, opakovanie a poloha. Samozrejme, opakovanie a umiestnenie nie sú vždy potrebné, ale v každom prípade je správnejšie použiť skratkový zápis vlastností. Vyzerá to takto:

pozadie: # 333 url (bg.jpg) bez opakovania 50 % 50 %;

pozadie: # 333 url (bg.jpg) bez opakovania 50 % 50 %;

To znamená, že prvým krokom je v prípade potreby zaznamenať celkovú plnú farbu pozadia. Potom cesta k obrázku, opakovanie a poloha. Ak niektorý parameter nie je potrebný, tak ho jednoducho vynecháme. Súhlasíte, je to oveľa rýchlejšie a pohodlnejšie a výrazne znižujeme aj náš kód. Vo všeobecnosti vám odporúčam, aby ste vždy písali v skratkách, aj keď potrebujete uviesť iba farbu alebo obrázok.

Ovládanie veľkosti obrázka na pozadí

Náš súčasný obrázok nie je vhodný pre ďalší trik, takže si vezmem iný. Vo veľkosti nech je ako blok alebo väčší ako on. Predstavte si teda, že stojíte pred úlohou: vytvoriť obrázok na pozadí tak, aby úplne nevyplnil svoj blok. A napríklad obrázok je ešte väčší ako veľkosť bloku.

Čo môžete v tomto prípade robiť? Samozrejme, najjednoduchšou a najrozumnejšou možnosťou by bolo jednoducho zmenšiť obrázok, ale nie vždy je to možné. Povedzme, že je na serveri a momentálne nie je čas ani príležitosť to zredukovať. Problém je možné vyriešiť použitím vlastnosti background-size, ktorú možno nazvať relatívne novou a ktorá vám umožňuje manipulovať s veľkosťou obrázka na pozadí a vlastne akéhokoľvek pozadia.

Takže môj obrázok teraz zaberá celý priestor v bloku, ale dám mu veľkosť pozadia:

veľkosť pozadia: 80 % 50 %;

pozadie - veľkosť: 80% 50%;

Opäť platí, že prvým parametrom je horizontálna veľkosť, druhá - vertikálna veľkosť. Vidíme, že všetko bolo aplikované správne - fotografia mala 80% šírky bloku na šírku a polovicu na výšku. Tu je potrebné urobiť len jedno upresnenie - nastavením veľkosti v percentách môžete ovplyvniť proporcie obrázka. Dávajte si preto pozor, aby ste nevyšli z miery.

Ako môžete hádať, veľkosť pozadia môže byť špecifikovaná aj v pixeloch. Existujú tiež dve kľúčové slová s významom, ktoré možno tiež použiť:

Obálka - obrázok bude zmenšený tak, aby aspoň jedna jeho strana úplne vypĺňala blok.

Obsah - upraví veľkosť tak, aby sa obrázok úplne zmestil do bloku pri jeho maximálnej veľkosti.

Výhodou týchto hodnôt je, že nemenia pomer strán obrazu, pričom ich ponechávajú rovnaké.

Tiež by ste mali pochopiť, že natiahnutie obrazu môže viesť k zhoršeniu jeho kvality. Môžem uviesť príklad zo života a reálnej praxe dispozičných dizajnérov. Každý vie a chápe, že pri kódovaní pre desktopy je potrebné prispôsobiť stránku základným šírkam monitorov: 1280, 1366, 1920. Ak si nasnímate obrázok na pozadí s veľkosťou povedzme 1280x200 a nenastavíte background-size, potom sú obrazovky so šírkou väčšie, objaví sa prázdne miesto, obrázok nevyplní celú šírku.

Web developerovi to v 99% prípadov nevyhovuje a tak nastaví background-size:cover tak, aby sa obrázok vždy natiahol na maximálnu šírku okna. Toto je dobrý trik, ale teraz narazíte na problém, že používatelia so šírkou obrazovky 1920 pixelov môžu vidieť obraz neoptimálnej kvality.

Pripomínam, že sa natiahne do maximálnej šírky. V súlade s tým sa kvalita automaticky zhorší. Jediným správnym riešením by bolo na začiatku použiť väčší obrázok - 1920 pixelov na šírku. Potom bude na najširších obrazovkách vo svojej prirodzenej veľkosti a na iných bude jednoducho pomaly orezaný, ale zároveň to pri správnom výbere obrázka na pozadí neovplyvní vzhľad stránky.

Vo všeobecnosti je to len 1 príklad toho, ako využiť znalosti získané v tomto článku pri vytváraní skutočných rozložení.

Polopriehľadné pozadie s css

Ďalším trikom, ktorý je možné implementovať pomocou css, je polopriehľadné pozadie. To znamená, že cez toto pozadie bude možné vidieť, čo je za tým.

Ako príklad uvediem celú stránku ako pozadie s obrázkom, ktorý sme použili skôr v príkladoch. Pre blok s identifikátorom bg, na ktorom robíme všetky naše experimenty, nastavíme pozadie pomocou farebného formátu rgba.

Ako som už povedal, v css existuje veľa formátov na nastavenie farieb. Jedným z nich je rgb, čo je pomerne známy formát pre tých, ktorí pracujú v grafických editoroch. Píše sa takto: rgb (17, 255, 34);

Prvá hodnota v zátvorkách je sýtosť červenej, potom zelenej a potom modrej. Hodnota môže byť numerická od 0 do 255. Formát rgba sa teda nelíši, pridáva sa iba jeden parameter - alfa kanál. Hodnota môže byť od 0 do 1, kde 0 je úplná priehľadnosť.

krátke info

CSS verzie

Hodnoty

url Hodnota je cesta ku grafickému súboru, ktorá je uvedená v konštrukcii url (). V tomto prípade môže byť cesta k súboru napísaná buď v úvodzovkách (dvojitých alebo jednoduchých), alebo bez nich. none Zruší obrázok pozadia pre prvok. zdediť Zdedí hodnotu od rodiča.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektový model

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

Prehliadače

Internet Explorer 7.0 alebo novší aplikuje pozadie na vnútornú stranu okraja prvku, ktorý má nastavenú vlastnosť hasLayout. Ak prvok nemá hasLayout, vlastnosť background-image bude rešpektovať hranice prvku špecifikované v špecifikácii. Rozdiel v zobrazení bude viditeľný, ak budú okraje prerušované alebo bodkované, a nie plné.

Ak je prvok nastavený na posúvanie alebo automatické posúvanie, Internet Explorer 8 bude mať pri posúvaní pozadia vertikálne oneskorenie o jeden pixel.

Internet Explorer do verzie 7.0 vrátane nepodporuje zdedenú hodnotu.

Ak je pozadie nastavené pre riadok tabuľky (tag ), potom ho Chrome, Safari, iOS nezobrazujú tak, ako predpisuje špecifikácia, a to pre každú bunku samostatne. Zatiaľ čo prehliadač by mal zobrazovať pevné pozadie pre celý riadok. Príklad 2 ukazuje kód na preukázanie chyby.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Výsledok tohto príkladu v prehliadači Chrome je znázornený na obr. 1. Prehliadač Internet Explorer, Opera a Firefox zobrazuje pozadie pre riadok správne (obr. 2).

Ryža. 1. Opakovanie pozadia pre každú bunku

Ryža. 2. Pozadie pre celý riadok