V minulom článku sme hovorili o tom, ako zmeniť farbu pozadia na webe pomocou atribútov značiek telo a CSS štýly: . Tento článok bude hovoriť o použití obrázkov ako pozadia na webovej stránke, ako roztiahnuť pozadie na celú šírku stránky a opraviť ho.

Obrázok ako pozadie stránky - HTML

Najprv zvážime spôsob špecifikácie obrázok na pozadí na stránke pomocou atribútu pozadie tag telo:

Tu je obrázok na pozadí nastavený pomocou atribútu pozadia značky body.

Ako v príklade vyššie, odporúča sa zadať okrem obrázka aj farbu pozadia (zobrazí sa na stránke počas načítavania stránky), ktorá bude najlepšie zodpovedať obrázku na pozadí a vytvorí kontrast s textom na strane. Ak napríklad na svojej webovej lokalite používate bielu farbu textu, mali by ste zadať tmavú farbu pozadia a nastaviť tmavý obrázok na pozadí. V tomto prípade bude text ľahko čitateľný.

Poznámka: Odporúča sa nastaviť obrázok pozadia a farbu pozadia nie pomocou HTML, ale pomocou pomocou CSS. V tomto prípade bude kód platný a správnejší.

Obrázok ako pozadie stránky - CSS

IN Pozadie CSS Novú farbu a obrázok pozadia je možné nastaviť v jednej vlastnosti pozadie:

Tu je obrázok na pozadí nastavený pomocou vlastnosti CSS pozadia.

Tu pomocou nehnuteľnosti pozadie-príloha pozadie stránky je pevné a používa sa vlastnosť pozadie-opakovať je nastavené horizontálne opakovanie obrazu. Ale stojí za to zvážiť, že obrázok na pozadí by mal byť dobre „prešitý“ okolo okrajov.

Ak chcete obrázok na pozadí roztiahnuť na plnú veľkosť okna prehliadača, použite vlastnosť veľkosť pozadia: 100 %;

V nástroji na tvorbu webových stránok Nubex môžete použiť veľký obrázok ako pozadie pre ľubovoľnú webovú stránku a pripnúť ho.

V tomto návode budeme podrobne študovať technológiu vytvárania responzívneho obrázka na pozadí, ktorý zaberie celú oblasť zobrazenia v prehliadači pri akomkoľvek rozlíšení. A použijeme CSS - vlastnosť background-size. Bez JavaScriptu:

PRÍKLAD
STIAHNUŤ ZDROJE

Príklady použitia responzívnych obrázkov na pozadí

Dnes sú veľmi obľúbené stránky, na ktorých obrázok na pozadí pokrýva celú zobrazenú oblasť stránky.
Nižšie sú uvedené niektoré z týchto webových stránok:

Plachtiteľský kolektív

Digitálna telepatia

Reštaurácia Marianne

Ak chcete dosiahnuť podobný „look“ vo svojom projekte, ste na správnej ceste.

Základné pojmy

Tu je náš herný plán.

Použite vlastnosť background-size na pokrytie celého výrezu

Vlastnosť CSS background-size môže byť nastavená na cover . Hodnota obalu dáva prehliadaču pokyn, aby automaticky a proporcionálne zmenšil obrázok na pozadí na dĺžku a šírku tak, aby zostal rovnaký alebo väčší ako šírka/výška výrezu.

Použitie mediálneho dopytu na získanie menšej verzie obrázka na pozadí pre mobilné zariadenia

Aby sme skrátili čas načítania stránky pri malom rozlíšení obrazovky, použijeme dopyt na médiá, aby sme získali menšiu verziu obrázka na pozadí. Ale to nie je potrebné a možno to vynechať. Táto technológia funguje skvele aj bez toho.

Používanie menších verzií pozadia pre mobilné zariadenia však nie je zlý nápad a vysvetlím prečo.
Obrázok, ktorý sa použije v príklade, má veľkosť približne 5500 x 3600 pixelov.

Pri tomto rozlíšení máme výhodu, že na väčšine v súčasnosti vyrábaných širokouhlých monitorov dosiahneme pokrytie celej zobrazovacej plochy, nevýhodou je však veľkosť obrazu. To je asi 1,7 MB.

Nechať toľko miesta na načítanie len obrázka na pozadí nie je v žiadnom prípade dobrý nápad a v prípade mobilných zariadení je to veľmi zlý nápad. Okrem toho je takéto rozlíšenie jednoducho zbytočné na obrazovkách s nízkym rozlíšením ( Neskôr vám o tom poviem viac).

Takže. Začnime.

HTML

Nižšie je všetko, čo potrebujete od označenia:

...obsah vašej stránky...

Elementu body priradíme podkladový obrázok a dosiahneme tak úplné pokrytie pozadia.

Táto technika však bude fungovať na akomkoľvek prvku bloku (ako je div alebo formulár ). V prípade, že šírka-výška vášho blokového kontajnera je pohyblivá, veľkosť obrázka na pozadí sa tiež zmení tak, aby vyplnil celú oblasť kontajnera.

CSS

Vlastnosti prvku tela deklarujeme nasledovne:

body ( /* Umiestnenie obrázka na pozadí */ obrázok na pozadí: url(images/foto na pozadí.jpg); /* Obrázok na pozadí je vycentrovaný horizontálne a vertikálne */ background-position: center center; /* Pozadie sa neopakuje */ background-repeat: no-repeat; /* Pozadie je vo výreze pevné, a preto sa nepohybuje, keď výška obsahu presahuje výšku obrázka */ background-attachment: fixed; /* Táto vlastnosť spôsobí pozadie na zmenu mierky pri zmene veľkosti kontajnera, ktorý obsahuje */ background-size: cover; /* Farba pozadia, ktorá sa zobrazí pri načítaní obrázka na pozadí */ background-color: #464646; )

Najdôležitejšia vlastnosť hodnoty v tomto zozname je:

veľkosť pozadia: obal;

Oplatí sa tomu venovať pozornosť. Tu sa stane zázrak. Tento pár hodnota – vlastnosť dáva prehliadaču pokyn, aby zmenšil obrázok na pozadí v takých proporciách, aby výška-šírka zostala rovnaká alebo väčšia ako výška-šírka samotného prvku. ( V našom prípade tento prvok- telo.)

A tu nastáva nepríjemná situácia pri dvojici majetok – hodnota. V prípade, že obrázok na pozadí bude mať nižšie rozlíšenie ako rozmery prvku tela, a to sa môže stať buď pri zobrazení stránky na obrazovkách s vysokým rozlíšením, alebo keď máte na stránke veľa obsahu, prehliadač obrázok roztiahne.

A ako viete, keď roztiahneme obrázok nad jeho skutočnú veľkosť, stratíme jeho kvalitu ( inými slovami, objaví sa pixelácia):

Keď sa mierka obrázka priblíži k jeho pôvodnej veľkosti, kvalita obrázka sa zníži.

Pri výbere pozadia na to nezabudnite. V ukážkovom príklade použijeme fotografiu s rozmermi 5500 x 3600 pixelov veľké obrazovky, a preto v tomto prípade k niečomu podobnému pravdepodobne nedôjde.

Aby sme zabezpečili, že naše pozadie bude zarovnané na stred, vyhlásili sme nasledovné:

pozadie-pozícia: stred stred;

Tým sa nastaví osi mierky do stredu výrezu.

Tu je to, čo urobíme. Nastavme vlastnosť background-attachment na fix, aby sme sa uistili, že obrázok zostane na svojom mieste, aj keď sa posunieme nadol po stránke:

pozadie: pevné;

V ukážkovom príklade som zahrnul možnosť „ stiahnuť nejaký obsah", aby ste mohli pozorovať správanie pozadia pri posúvaní stránky.

Jediné, čo musíte urobiť, je stiahnuť si demo a trochu experimentovať s vlastnosťami umiestnenia (background-attachment a background-position ), aby ste videli, ako ovplyvňujú rolovacie správanie stránky a pozadia.

Nasledujúce hodnoty vlastností sú samozrejmé.

Skratka CSS

Vyššie som pre prehľadnosť definoval vlastnosti CSS v plnom rozsahu.

A takto vyzerá krátka verzia:

telo ( pozadie: url(pozadie-foto.jpg) stredový kryt bez opakovania opravené; )

Jediné, čo musíte urobiť, je zmeniť hodnotu url na cestu k vášmu obrázku.

Voliteľné: dopyt na médiá na získanie menšej verzie obrázka na pozadí

Pre obrazovky s nižším rozlíšením budeme potrebovať Photoshop, aby proporcionálne znížil rozlíšenie obrázka na 768 x 505 pixelov. Spustil som to aj cez Smush.it, aby som zmenšil veľkosť súboru. To umožnilo znížiť veľkosť z 1741 na 114 kilobajtov. To znížilo veľkosť súboru o 93%.

Nechápte ma zle, ale 114 kilobajtov je stále dosť veľa na použitie pri niektorých typoch webdizajnu. A tých 114 kilobajtov načítame iba v prípade potreby, pretože pri pohľade na štatistiky je potrebné urobiť kompromisy medzi dizajnom pre stolné počítače a mobilné zariadenia.

A tu je samotný dopyt médií:

Kľúčovou časťou mediálneho dotazu je vlastnosť max-width: 767px, čo v našom prípade znamená, že ak je výrez prehliadača väčší ako 767px, použije sa veľký obrázok.

Nevýhodou tejto metódy je, že ak zmeníte veľkosť okna prehliadača povedzme z 1200 pixelov na 640 pixelov (alebo naopak), počas načítania menšieho alebo väčšieho obrázka uvidíte blikajúcu obrazovku.

A navyše vďaka tomu, že niektorí mobilné zariadenia dokáže pracovať vo vyššom rozlíšení – napríklad iPhone 5 s Retina displejom s rozlíšením 1136 x 640px bude menší obrázok vyzerať škaredo.

Takmer každá populárna stránka má pekné vzhľad. Dôležitou súčasťou dizajnu webových stránok je pozadie, nazývané aj pozadie, ktoré si môže vytvoriť alebo zmeniť každý z nás. V tomto článku vám poviem, ako umiestniť pozadie na webovú stránku.

Vytvorenie nového pozadia pre webové stránky

Na dokončenie úlohy môžete použiť jednu zo 4 metód:

• 1. Pozadie s jednou farbou
• 2. Pozadie s textúrou
• 3. Pozadie pomocou gradientu
• 4. Pozadie z veľkého obrázka

Vytvorte pozadie pomocou jednej farby

Ak chcete vytvoriť alebo zmeniť pozadie stránky, ktoré pozostáva z jednej farby, musíte prejsť do súboru style.css, v ktorom nájdite hodnotu - telo (zodpovedá za hlavné telo stránky). Teraz musíte zaregistrovať funkciu farby pozadia, ak neexistovala, a zadať kód farby. V prípade, že potrebujete vytvoriť biele pozadie pre webovú stránku, budete musieť napísať nasledujúci kód:

farba pozadia: #83C5E9 ; (modré pozadie, ako v príklade)

Kompletný zoznam farieb nájdete na stránke - (STM). Ak chcete zmeniť farbu, jednoducho zmeňte hodnotu za dvojbodkou a užite si svoje úsilie.

Vytvorenie pozadia pomocou textúry

Táto metóda je obzvlášť populárna v V poslednej dobe, pretože vám umožňuje vytvoriť krásne pozadie pre stránku. Textúry môžu byť jednoduché, ale veľmi krásne, a preto sa často používajú. Ak chcete pripojiť akúkoľvek textúru, musíte ju nahrať do priečinka s obrázkami na hostingu, kde je nainštalovaná vaša stránka. Potom by ste mali napísať nasledujúci kód:

farba pozadia: #537759;

background-image: url(images/pattern.png);

Tento kód obsahuje známy parameter pre zachovanie farby (je zelená) a prvok, ktorý je zodpovedný za prepojenie zelenej textúry.

Vytvorenie pozadia pomocou gradientu

Akýkoľvek obrázok, ktorý je pripojený pomocou funkcií css, je možné opakovať horizontálne aj vertikálne (pozdĺž osí X A Y). Táto príležitosť nám umožňuje vytvoriť pre stránku akékoľvek jednoduché pozadie vlastnými rukami. Ak to chcete urobiť, musíte vytvoriť gradient široký 1 megapixel (pozri obrázok nižšie), uložiť ho ako obrázok a nahrať na svoj hosting. Potom môžete napísať potrebný kód, konkrétne:

farba pozadia: #83C5E9;

background-image: url(images/gradient.jpg);

background-repeat: repeat-x;

V tomto súbore je v poradí podľa priority funkcia zodpovedná za farbu pozadia, ktorú používame na zaistenie. Potom parameter, ktorý je zodpovedný za pripojenie gradientu a nakoniec funkcia, ktorá je zodpovedná za opakovanie gradientu pozdĺž osi X.

Použitie veľkého obrázka na pozadie webovej stránky

Táto metóda je druhá najpopulárnejšia, pretože vám umožňuje použiť rôzne obrázky na vytvorenie pozadia. Na implementáciu tejto metódy stačí nahrať veľký obrázok do priečinka obrázkov na lokalite a zadať nasledujúci kód:

farba pozadia: #000000;

background-image: url(images/image title.jpg);

background-position: center top;

background-repeat: no-repeat;

Ak je všetko jasné s prvými dvoma parametrami, potom je potrebné pokryť posledné dva. Tretia funkcia umožňuje opraviť obrázok v strede stránky a posledný parameter blokuje jeho opakovanie v celej štruktúre stránky.

Zmena pozadia na weboch ucoz

Tie spôsoby vytvárania pozadia pre stránku je možné použiť na rôznych redakčných systémoch, ale nie na stránkach - ucoz. Ak chcete zmeniť pozadie webovej stránky ucoz, musíte prejsť na ovládací panel lokality, prejdite na "Správa dizajnu" a potom dovnútra "Úprava šablón".

Teraz musíte otvoriť šablónu štýlov (CSS), nájsť riadok "telo" a parametrom "pozadie". Potom musíte skopírovať odkaz, vložiť ho do internetového prehliadača a budete mať prístup k obrázku, ktorý bol pozadím.

Ak chcete použiť nové pozadie, stačí ho nahrať do Správca súborov. Zároveň sa uistite, že názov nového obrázka na pozadí je rovnaký ako pred zmenou. Uložte svoju prácu a prejdite na webovú stránku, kde nájdete vykonanú prácu.

Zmena pozadia stránky na HTML

Ak chcete vytvoriť pozadie na html stránke pomocou obrázka, jednoducho zadajte riadok do kódu:

A ak chcete vytvoriť pozadie stránky pomocou farby, riadok by mal vyzerať takto:

Týmto sa náš príbeh končí. Teraz viete, ako vytvoriť pozadie pre webovú stránku. Šťastné projekty!

Každá miestnosť bude vyzerať oveľa lepšie, ak bude jej podlaha pokrytá drahým perzským kobercom. Prečo je teda váš web horší? Možno je čas „pokryť“ podlahu drahým, elegantným ručne vyrobeným kobercom. Pozrime sa bližšie na to, ako vytvoriť pozadie pre webovú stránku:

Pozadie pre stránku

Stáva sa to starý dizajn Už som unavený zo stránky. A chcem niečo nové a chutné. A nový dizajn bude to tak, ak to uvaríte vlastnými rukami.

Ale úplne zmeniť celý dizajn zdroja svojpomocne je nevďačná úloha. A nie každý má na túto úlohu správne vycvičené ruky. Najjednoduchším spôsobom obnovenia starej šablóny je preto zmena farby pozadia zdroja alebo jeho obrázka na pozadí.

Existuje niekoľko spôsobov, ako zmeniť pozadie na webovej stránke. Na to sa využívajú možnosti CSS alebo html. Ale mnohé vlastnosti pre prácu s pozadím majú rovnaký názov a spôsob aplikácie v týchto webových technológiách.

Základy práce s pozadiami v html

Ako pozadie možno použiť niekoľko prvkov:

• Farba;
• Obrázok na pozadí;
• Obrázok textúry.

Pozrime sa na použitie každého z nich podrobnejšie.

Ak chcete nastaviť farbu pozadia lokality, použite vlastnosť background-color atribútu style. To znamená, že ak chcete nastaviť hlavnú farbu webovej stránky, musíte ju napísať do značky . Napríklad:

Pozadie webovej stránky #55D52B

Okrem hexadecimálneho farebného kódu je podporovaná hodnota vo formáte kľúčového slova alebo RGB. Príklady:

Pozadie webovej stránky rgb (23,113,44)

Pozadie webovej stránky zelené

Nastavte farbu pozadia pomocou Kľúčové slová má v porovnaní s ostatnými dvoma metódami množstvo obmedzení.

HTML podporuje iba 16 kľúčových slov na nastavenie farieb. Tu je niekoľko z nich: biela, červená, modrá, čierna, žltá a ďalšie.

Preto, aby ste nastavili pozadie pre html stránku, je lepšie použiť hexadecimálny alebo RGB formát.

Okrem výberu farieb sú k dispozícii aj ďalšie možnosti prispôsobenia. Ak je vlastnosť background-color nastavená na priehľadné , pozadie stránky sa stane priehľadným. Táto hodnota je predvolene priradená tejto vlastnosti.

Teraz sa pozrime na možnosti hypertextového jazyka na nastavenie obrázka na pozadí pre web. Dá sa to urobiť pomocou vlastnosti background-image.

Ako môžete vidieť z kódu, obrázok je prepojený prostredníctvom adresy URL uvedenej v zátvorkách. Nie všetky obrázky sú však také veľké, aby ich veľkosť zaplnila celú plochu obrazovky. Pozrime sa, ako sa zobrazí menší obrázok.

Predpokladajme, že vyvíjame webovú stránku o poézii a ako pozadie potrebujeme použiť obrázok Pegasa. Okrídlený kôň zosobní slobodu tvorivej myšlienky básnika!

Potrebujeme, aby sa obrázok raz zobrazil v strede obrazovky. Ale, bohužiaľ, prehliadač nerozumie našim vznešeným túžbam. A zobrazuje menší obrázok na pozadí stránky toľkokrát, koľkokrát sa do oblasti obrazovky zmestí:

Azda štyri usmievavé kone s krídlami budú pre básnikov priveľkou inšpiráciou. Preto zakazujeme klonovanie nášho Pegasa. Robíme to pomocou vlastnosti background-repeat. Možné hodnoty:

• repeat-x – zopakuje obrázok na pozadí vodorovne;
• repeat-y – vertikálne;
• opakovať – na oboch osiach;
• no-repeat – opakovanie je zakázané.

Spomedzi uvedených možností nás zaujíma posledná. Pred zmenou pozadia stránky ho používame v našom kóde:

Ale, samozrejme, bolo by lepšie, keby sa náš leták nachádzal v strede obrazovky. Vlastnosť background-position je presne určená na umiestnenie obrázku pozadia na stránke. Súradnice polohy môžete nastaviť niekoľkými spôsobmi:

• kľúčové slovo ( hore, dole, v strede, vľavo, vpravo);
• Percento – počítanie začína od ľavého horného rohu;
• V jednotkách merania (pixeloch).

Použime najjednoduchšiu možnosť centrovania:

Stáva sa, že pri posúvaní potrebujete opraviť polohu obrázka. Preto pred vytvorením obrázka ako pozadia stránky použite špeciálnu vlastnosť background-attachment . Hodnoty, ktoré akceptuje, sú:

• rolovať;


• pevné.

Potrebujeme poslednú hodnotu. Teraz bude náš príklad kódu vyzerať takto:

Webové stránky textúry pozadia

V prvom príklade sme ako pozadie použili veľkú a krásnu púštnu krajinu. Ale za takú krásu musíte zaplatiť v plnej výške. Hmotnosť vytvoreného obrazu vysoká kvalita, môže dosiahnuť niekoľko megabajtov.

Tento objem žiadnym spôsobom neovplyvňuje rýchlosť načítania stránky prehliadača s vysokorýchlostným internetovým pripojením. Ale čo už mobilný internet, ktorej načítanie niekoľkých „metrákov“ bude trvať dlho?

Všetky tieto problémy sú vyriešené pomocou textúrovaného pozadia. Používa malý obrázok ako vzor textúry. Aj keď sa to mnohokrát opakuje, kresba sa načíta iba raz.

Trepachev D.P. 2012-2020

Študentom: Do 6. januára mám prázdniny, cez prázdniny odpoviem ako sa len dá,
niekedy dokážem na pár dní zmiznúť

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Základný návod Referencie HTML Referencie CSS Návod na OOP a MVC Video návody Základný návod Referencie Video návody Základný návod Základný návod Základný návod Návod na administrátora Návod na vývojárov AJAX+PHP návod

vlastnosť background-attachment

Nehnuteľnosť pozadie-príloha určuje spôsob rolovania obrázok na pozadí prvok: spolu s textom alebo textom sa bude posúvať cez obrázok.

Syntax

Selektor ( príloha na pozadí: pevná | posúvať | miestne; )

hodnoty

Predvolená hodnota: rolovať.

Príklad. Posunúť hodnotu

Teraz majetok pozadie-príloha nastavený na rolovať. Posuňte prvok vertikálne - uvidíte, ako sa text posúva spolu s pozadím:

body ( background-attachment: scroll; background-image: url("bg.png"); ) #elem ( width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20 pixelov ;)

Príklad. Posunúť hodnotu

A teraz majetok pozadie-príloha nastavený na pevné. Posuňte prvok vertikálne a uvidíte, ako sa text posúva po pozadí:

body ( background-attachment: fixed; background-image: url("bg.png"); ) #elem ( width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20 pixelov ;)