Pozadie je dôležitou súčasťou webovej stránky. Štandardne má bielu farbu. Ale jazyk HTML poskytuje niekoľko možností na zmenu jeho vlastností. Na internete, väčšina stránok - s farebným pozadím, vrátane animácie. Majú odlišnú grafiku alebo obrázky na pozadí. Nastavenie štýlu pozadia pre webové stránky sa vykonáva pomocou atribútu - pozadia v jazyku HTML. Existuje niekoľko vlastností CSS, ktoré sa používajú na nastavenie pozadia položky.
Atribúty pre zmenu nastavenia pozadia
V kóde napísanom v jazyku HTML sa nastavuje pozadie pre celú stránku, ako aj pre jej jednotlivé prvky. Predtým sa na to použila značka, ale teraz sa táto prax považuje za zastaranú. Atribút bol použitý na špecifikáciu 401 a bol zaznamenaný v jazyku HTML :. Najjednoduchším spôsobom, ako zmeniť predvolenú hodnotu, je nastavenie vlastností atribútu farby pozadia pre značku.
Existuje päť hlavných atribútov, ktoré sa používajú v HTML a CSS na zmenu pozadia:
-color - ukazuje, ktorá farba sa použije pri záplave;
-image - nastaví obrázok na pozadie;
-position - Označuje, kde umiestniť obrázok na pozadí;
-repeat - určuje, či je obraz opakovateľný;
- závislosť - určuje, či sa obrázok bude pohybovať spolu so stránkou;
-size - nastaví pozadie na určitú veľkosť;
-origin - definuje oblasť pre umiestnenie pozadia na pozadí;
-clip - Určuje, ako sa obrázok podkladu alebo farba pozadia zobrazuje pod hranicami prvku.
Najskôrpäť vlastností možno kombinovať do jedného krátkeho atribútu - pozadia. Tento atribút funguje v prehliadačoch Firefox, Safari, Opera, IE8. Iba v zastaraných jazykoch IE7 a IE6 pozadie neobsahuje hranice.
Ako zmeniť farbu pozadia v HTML
Atribút "farba pozadia" (HTML a CSS) vyplní stránky s plnou farbou. Existuje niekoľko spôsobov, ako nastaviť farbu v rôznych formátoch:
-color: červená;
-color: rgb (00255);
- farba: # 2500ff.
Pre pozadie je možné nastaviť priehľadnú vlastnosť, ktorá zodpovedá stupňu transparentnosti a umožňuje zobrazenie akýchkoľvek častí pod ním.
Ako nastaviť obrázok na pozadí
Obraz na pozadí je vlastnosť, ktorá umožňuje určiť obrázok, ktorý sa zobrazí namiesto pozadia. Zadá sa pomocou kódu CSS a jazyka HTML: background-image: url (image.jpg). Kód je veľmi jednoduchý, ale aby mohol fungovať, obrázok by mal byť v rovnakom priečinku ako súbory so štýlmi. Ak tomu tak nie je, zátvorky musia určiť správnu adresu, napríklad: background-image: url (images /image.jpg). Obrázok pozadia sa môže použiť v spojení s farbou pozadia. Ak sa to neopakuje, potom druhá, ktorá nie je zahrnutá v priestore pre obrázky, bude mať farbu určenú v tejto vlastnosti.
Pozadie
Atribút CSS a poloha pozadia HTML riadia polohu pozadia a určujú, kde sa nachádza v prvku. Použite ho na určenie miesta, kde sa bude nachádzať ľavý horný roh obrázka v porovnaní s ľavým horným rohom elementu. Najprv sa v mape nachádza pozícia na horizontálnej súradnicovej osi a potom na vertikálnej. Ak to chcete urobiťje jednoduchšie použiť pixely. Napríklad:
-position: 0 0 - štandardne používaný a označuje umiestnenie pozadia v ľavom hornom rohu elementu;
-position: 100px 0 - presunúť obrázok doprava;
-position: -100px 0 - presuňte obrázok doľava;
-position: 0100px - zníženie obrazu.
Atribút pozadia pozície funguje aj s inými hodnotami, kľúčovými slovami a percentami. Môžu byť užitočné, ak veľkosť prvku nie je špecifikovaná v pixeloch.
Ako používať kľúčové slová na pozadie pozadia
Kľúčové slová môžu byť použité na určenie súradníc na horizontálnej a vertikálnej osi, nezáleží na tom, v akom poradí sú zaznamenané. Variácie kľúčových slov pre horizontálnu os:
vľavo;
centrum;
vpravo.
Pre vertikálnu os:
hore;
centrum;
dolu.
Pri práci s inými mernými jednotkami sú súradnice najprv špecifikované na horizontálnej osi a potom na zvislej osi. Pozadie pozadia: vpravo dole. Úrokové sadzby sa používajú rovnakým spôsobom. V tomto prípade sa odpočítavanie nachádza v ľavom hornom rohu okna prehliadača. Príklad využitia záujmu: poloha pozadia: 100% 50%. Znamená to, že obraz sa posunie doprava a bude v strede pravého dielu prvku. Rovnaký efekt môžete získať aj vtedy, ak použijete vlastnosť: pravý stred. Ak používate hodnotu pozadia pozadia: 100% 100%, potom sa pozadie objaví v pravom dolnom rohu elementu.
Opakovanie pozadia
Predvolene, ak je obrázok nastavený nakvalitu pozadia, opakuje sa horizontálne i vertikálne, kým sa neobnoví celé okno alebo prvok prehliadača. Niekedy sa však vyžaduje, aby bol obraz zobrazený iba raz alebo umiestnený iba v jednom smere. Ak chcete to urobiť, CSS a HTML pre pozadie vyžadujú nasledujúce atribúty:
-repeat: repeat - obrázok sa predvolene opakuje, kým sa položka úplne naplní;
-repeat: no-repeat - obrázok sa neopakuje a používa sa iba raz na stránke;
-repeat: repeat-x - opakovanie iba na vodorovnej osi;
-repeat: opakovanie-y - opakovanie iba na vertikálnej osi;
-repeat: inherit - prehliadač používa hodnotu priradenú k nadradenému prvku.
Atribút pre posuvník
Pozadie HTML na pozadí určuje, čo sa stane s obrázkom, keď sa používateľ posúva cez stránku. Tento atribút má niekoľko vlastností: posúvanie, oprava a zdedenie. Zdědiť správy, že príloha na pozadí zdedí vlastníctvo jej rodiča. Ak chcete správne používať pozadie, musíte premýšľať o tom, ako bude používateľ interaktívne s výrezom. Prehliadač je časť vášho prehliadača, ktorá zobrazuje webovú stránku. Pri posúvaní stránok sa nepohybuje. Namiesto toho sa obsah stránok posúva nahor, ale zdá sa, že stránka sa v okne prehliadača posúva.
Pri nastavovaní vlastností posúvania pozadia HTML: posúvanie sa prehliadač povie, že pozadie by sa malo posúvať spolu s prvkom. Pozadie "pritlačí" na prvok a posúva sa, kým nezmizne. To je všetkopredvolená hodnota pre pripojenie na pozadí. Keď sa však nastaví pozadie - príloha: fixná vlastnosť, potom pozadie zostane na mieste a nebude sa pohybovať spolu s obsahom. Pri posúvaní stránky zostane vždy viditeľné.
Ako krátko zapísať vlastnosti pozadia
Namiesto toho, aby ste museli každý čas písať všetky tieto pravidlá, môžete ich skombinovať do jedného a napísať ich takto: background :. Nie je potrebné špecifikovať každú hodnotu zvlášť. Ak sa táto vlastnosť nepoužije, namiesto nej sa použije predvolená hodnota. Je dôležité poznamenať, že obrázok pozadia sa zobrazuje iba v tých oblastiach, kde je prítomný nadradený prvok. Aj keď sa nachádza v porovnaní s oknom prehliadača, nezobrazí sa, ak nie je jeho nadradená položka viditeľná. Pre pozadie položiek v CSS3 môžete použiť viac ako jeden obrázok. Kód bude rovnaký ako kód CSS2, iba jednotlivé adresy obrázkov musia byť oddelené čiarkou. Prvá bude umiestnená v hornej časti elementu a ďalšia bude zlúčená do nej.
Vlastnosť veľkosti pozadia
Niekedy musí stránka určiť pozadie určitej veľkosti. Atribút, ktorý sa používa v tomto prípade vo formáte HTML - veľkosť pozadia. Táto vlastnosť má niekoľko možných hodnôt:
-size: obsahuje - rozlíši obraz tak, aby sa zhodoval s prvkom, pri zachovaní pomeru strán obrazu;
-size: cover - rozširuje obrázok tak, aby vyplnil prvok, zachovanie proporcií;
-size: 100px 100px - rozlíšenie obrazu na určenú veľkosť;
- veľkosť: 50% 100% - Zmeria obraz na zadanú veľkosť, percento sa vzťahuje na veľkosť položky.
Veľkosť pozadia v jazyku HTML pre Firefox až do verzie 4.0 je nastavená na hodnotu non-default property -moz-background-size. Podobne, pre verziu Opera 1053 je potrebné predpísať aj veľkosť pozadia.
vlastnosť pôvodu pozadia
Vlastnosť pôvodu pozadia sa používa v spojení s polohou pozadia na umiestnenie pozadia na pozadí. Platí, ak je príloha na pozadí nastavená na pevnú. Jeho parametre je možné odvodiť z hraníc, vresnutí alebo obsahu položky.
- pôvod: hraničný box; pozadie - pozícia sa vypočítava z hranice.
- pôvod: polica; Pozadie pozície sa vypočíta z poľa vyplnenia.
-origin: obsah-box; Pozadie sa vypočíta na základe obsahu položky.
Možnosti použitia pozadia na pozadí
Okrem zjavných dekoratívnych výhod pozadia môže byť použitá aj na iné účely. Napríklad, ak pridáte vlastnosť floating CSS na kompenzáciu prvkov, je ťažké zabezpečiť, aby sa dva alebo viac stĺpcov zobrazovalo rovnakú šírku. Ak sa líšia, pozadie jedného zo stĺpcov skončí pred pozadím druhého. Tento efekt sa dá vyhnúť, ak použijete samostatné pozadie pre každý stĺpec. Je však oveľa jednoduchšie aplikovať jeden pozadie na svoj prvok. Ďalšou možnou aplikáciou je dekorácia neusporiadaných zoznamov. Bulity v nich nemusia vyzerať veľmi atraktívne, takže je lepšie ich skryť a nahradiť ich obrazom na pozadí.
Písma namiesto pozadia v html: font na pozadí
Výber písma preregistrácia stránok na internete je veľmi obmedzená. Môžete vytvoriť pôvodné písma, ale vyžadujú, aby používateľ povolil podporu javascript. Jednoduchšie riešenie, ktoré funguje v ľubovoľnom prehliadači - vytvára obrázok z textu a používa ho ako pozadie pre prvok. Ak chcete, aby zostal text v označení pre vyhľadávače a čítačky obrazovky, jednoducho jednoducho priraďte prvku k prvku, nechajte text v popise a pridajte obrázok pomocou CSS. V takom prípade budú prehliadače zobrazovať nápis pomocou písiem, ktoré nie sú definované používateľom, a to menom, ktoré si vybral návrhár.
Nová vlastnosť pozadia
CSS3 má novú funkciu: prvky je možné rozdeliť na jednotlivé bloky, riadky a stránky. Vlastnosť prerušenia pozadia definuje, ako sa pozadie zobrazuje v rôznych oknách. Možné hodnoty:
-break: nepretržitá - predvolená hodnota. Ošetruje bloky, akoby medzi nimi nebol priestor;
- zlomenie: ohraničovací box - berie do úvahy priestor medzi blokmi;
-break: all-box - spracováva každý blok v prvku jednotlivo a každý pozadie vykresľuje pozadie individuálne.
Existuje mnoho ďalších vlastností, ktoré prispievajú k prispôsobeniu zobrazenia pozadia, tu sú najčastejšie opísané. Znalosti prichádzajú so skúsenosťami, takže prax je najlepší spôsob, ako sa naučiť CSS a HTML.
