Pozadí je důležitou součástí webové stránky. Ve výchozím nastavení má bílou barvu. Jazyk HTML však nabízí několik možností pro změnu vlastností. Na internetu, většina stránek - s barevným podkladem, včetně animace. Mají různé grafiky nebo obrázky na pozadí. Nastavení stylu pozadí pro webové stránky se provádí pomocí atributu - pozadí v HTML. Existuje několik vlastností CSS, které se používají k nastavení pozadí položky.
atributy pro změnu parametrů pozadí
kód napsán v HTML, nastavit jako pozadí pro celou stránku, a některé jeho prvky. Dříve byla pro tento účel použita značka, ale nyní je tato praxe považována za zastaralou. Atribut byl použit pro specifikaci 401 a byl zaznamenán v HTML :. Nyní je nejsnazší způsob, jak změnit výchozí hodnotu, nastavit vlastnosti atributu barvy pozadí značky.
Je jich tam pět základní atributy používané v HTML a CSS změnit pozadí:
-color - ukazuje, jakou barvu budou použity k vyplnění;
-image - nastaví obrázek pozadí;
- poloha - udává, kam umístit obrázek na pozadí;
-repeat - určuje, zda je obraz opakovatelný;
- nápověda - určuje, zda se bude obrázek posouvat spolu se stránkou;
-size - nastaví pozadí na určitou velikost;
-origin - definuje oblast pro umístění obrázku na pozadí;
-clip - Určuje, jak se pod hranicemi prvku zobrazí obrázek na pozadí nebo barva pozadí.
Nejprvepět vlastností lze kombinovat do jednoho krátkého atributu - pozadí. Atribut funguje v prohlížeči Firefox, Safari, Opera, IE8. Pouze v zastaralých IE7 a IE6 pozadí neobsahují hranice.
Jak změnit barvu pozadí v HTML
Atribut "barva pozadí" (HTML a CSS) vyplňuje stránky s plnou barvou. Existuje několik způsobů, jak nastavit barvu v různých formátech:
-color: červená;
- barva: rgb (00255);
- barva: # 2500ff.
Pro pozadí je možné nastavit průhlednou vlastnost, která odpovídá stupni průhlednosti a umožňuje zobrazení všech prvků pod ním.
Jak nastavit obrázek na pozadí
Obrázek na pozadí je vlastnost, která umožňuje zadat obrázek, který bude zobrazen místo pozadí. Zadává se pomocí kódu CSS a jazyka HTML: background-image: url (image.jpg). Kód je velmi jednoduchý, ale aby mohl fungovat, měl by být obraz ve stejné složce jako soubory se styly. Pokud tomu tak není, závorky musí zadat správnou adresu, například: background-image: url (images /image.jpg). Obraz na pozadí lze použít ve spojení s barvou pozadí. Pokud se to neopakuje, pak druhá, která není pokryta obrazovým prostorem, bude mít barvu zadanou v této vlastnosti.
Pozadí
Atribut CSS a poloha pozadí HTML řídí umístění obrázku na pozadí a určuje, kde se nachází v elementu. Použijte jej k určení, kde bude umístěn levý horní roh obrázku vzhledem k levému hornímu rohu prvku. Nejprve ve vlastnictví je pozice zapsána na horizontální osa souřadnic a pak - na vertikální. Chcete-li to provéstje snadnější používat pixely. Například:
-position: 0 0 - implicitně použitá a označuje umístění pozadí v levém horním rohu elementu;
-position: 100px 0 - přesunout obraz doprava;
-position: -100px 0 - posunout obrázek doleva;
-position: 0100px - snížit snímek.
Atribut pozadí-pozice také pracuje s jinými hodnotami, klíčovými slovy a procenty. Mohou být užitečné, pokud velikost prvku není určena v pixelech.
Jak používat klíčová slova k pozici pozadí
Klíčová slova lze použít k určení souřadnic na horizontální a svislé ose, nezáleží na tom, v jaké sekvenci se zaznamenávají. Změny klíčových slov pro vodorovnou osu:
vlevo;
centrum;
vpravo.
Pro svislou osu:
horní;
centrum;
dolů.
Při práci s jinými měřicími jednotkami jsou souřadnice nejprve specifikovány na horizontální ose a pak na vertikální. Například pozice pozadí: vpravo dole. Úrokové sazby se používají stejným způsobem. V tomto případě se odpočet nachází v levém horním rohu okna prohlížeče. Příklad využití úroku: poloha pozadí: 100% 50%. To znamená, že obraz se posouvá doprava a bude uprostřed pravé části prvku. Stejný efekt lze dosáhnout, pokud používáte vlastnost: pravý střed. Pokud použijete hodnotu pozici pozadí: 100% 100%, zobrazí se pozadí v pravém dolním rohu prvku.
Opakování pozadí
Ve výchozím nastavení, když je obraz nastaven nakvalita pozadí, opakuje se jak horizontálně, tak i vertikálně, dokud není vyplněno celé okno nebo prvek prohlížeče. Někdy je však nutné, aby se obraz zobrazoval pouze jednou nebo byl umístěn pouze jedním směrem. Chcete-li to provést v CSS a HTML na pozadí je třeba následující atributy:
-repeat: opakování - výchozí obrázek se opakuje pro dokončení položky;
-repeat: ne-repeat - obrázek není opakuje na straně použit pouze jednou;
-repeat: repeat-x - opakování pouze na vodorovné ose;
-repeat: repeat-y - opakovat pouze na svislé ose;
-repeat: dědí - prohlížeč používá nadřazený hodnota přiřazena.
připisují posuvníku
V HTML background-attachment určuje, co se stane s obrazem, když uživatel posune stránku. Tento atribut má několik vlastností: posouvat, pevné a dědit. Zděděte zprávy, že příloha na pozadí zdědí vlastnost jejího nadřazeného objektu. Chcete-li správně používat pozadí na pozadí, musíte přemýšlet o tom, jak bude uživatel interagovat s výřezem. Prohlížeč je část prohlížeče, která zobrazuje webovou stránku. Při rolování na místě se nepohybuje. Místo toho obsah stránky posouvá nahoru, ale zdá se, že v okně prohlížeče svitky dole na stránce.
Při nastavování vlastností HTML background-attachment: scroll, hlásí prohlížeč, který na pozadí by měl posouvat s prvkem. Pozadí se "drží" na prvek a posouvá se, dokud nezmizí. To je všechnovýchozí hodnota pro pozadí. Když je však nastavena položka pozadí: fixní vlastnost, pozadí by mělo zůstat na místě a nebude se pohybovat spolu s obsahem. Při posouvání stránky zůstává vždy viditelná.
Jak zapisovat reality pozadí
Spíše než pokaždé oddělit všechna tato pravidla, můžete je spojit do jednoho a napsat takto: pozadí :. A nemusíte specifikovat každou hodnotu zvlášť. Není-li vlastnost použita, místo toho se použije výchozí hodnota. Je důležité poznamenat, že obrázek na pozadí se objeví pouze v těch oblastech, kde je přítomen nadřazený prvek. Dokonce i v případě, že se nachází v poměru k oknu prohlížeče, nebude zobrazen, pokud není jeho nadřazený prvek viditelný. Pro pozadí položky v CSS3 můžete použít více než jeden obrázek. Kód bude stejný jako kód CSS2, pouze jednotlivé adresy obrázků musí být odděleny čárkou. První bude umístěna v horní části prvku a další se do něj spojí.
Vlastnost velikost pozadí
Někdy je třeba místo zadat pozadí určité velikosti. Atribut, který se používá pro tento formát ve formátu HTML - pozadí. Na tuto vlastnost existuje několik možných významů:
-size: obsahují - změní velikost obrazu tak, že navazuje na těleso při zachování poměru stran skenování;
- velikost: obálka - rozšiřuje obraz pro vyplnění prvku, zachování proporcí;
- velikost: 100px 100px - změní velikost obrazu na určitou velikost;
- velikost: 50% 100% - Zvětší obraz na zadanou velikost, procento se vztahuje k velikosti položky.
Velikost pozadí v jazyce HTML pro aplikaci Firefox až do verze 4.0 je nastavena na hodnotu non-default property -moz-background-size. Podobně pro verzi Opera 1053 je třeba předepsat i velikost pozadí.
vlastnost původního pozadí
Vlastnost původu pozadí se používá ve spojení s pozicí pozadí pro umístění obrázku na pozadí. Platí, je-li příloha na pozadí nastavena na pevnou. Její parametry lze odvodit z hranic, zářezů nebo obsahu položky.
- původní: rámeček; pozadí - pozice se vypočítá z okraje.
- původní: polštář; pozadí - poloha je vypočtena z pole plnění.
- původní: obsah-box; pozadí - pozice je vypočtena na základě obsahu položky.
Možnosti využití obrázku na pozadí
Kromě zdanlivého dekorativního přínosu pozadí může být také použita pro jiné účely. Například pokud přidáte vlastnost floating CSS k odsazení prvků, je obtížné zajistit, že dva nebo více sloupců se zobrazí stejnou šířkou. Pokud se liší, pozadí jednoho ze sloupců skončí před pozadí druhého. Tento efekt lze zabránit, pokud použijete samostatné pozadí pro každý sloupec. Ale je mnohem snazší použít jeden nadřazený obrázek na svůj nadřazený prvek. Další možnou aplikací je dekorace neuspořádaných seznamů. Bulity v nich nemusí vypadat příliš atraktivně, takže je lepší je skrýt a nahradit je obrazem na pozadí.
Písma místo pozadí v html: písmo na pozadí
Výběr písma proregistrace stránek na internetu je velmi omezená. Můžete si vytvořit originální písma, ale vyžadují, aby uživatel patří podporou JavaScriptu. Jednoduché řešení, které funguje v libovolném prohlížeči -creation obrázků s textem a použít ji jako pozadí prvku. Pokud chcete, aby znění zůstalo značky pro vyhledávače a pro čtení z obrazovky, jednoduše přiřadit člen třídy odejít textu v popisu a přidat obrázek pomocí CSS. Nicméně prohlížeče se zobrazí nápis, nepoužívají vlastní písmo, jako je například jeden vybrán projektant.
nové vlastnosti pozadí-break
V CSS3 objevil inovace: prvky mohou být rozdělena do samostatných bloků, linií a stránek. Vlastnost přetržení pozadí definuje, jak se pozadí zobrazí v různých oknech. Možné hodnoty:
-break: kontinuální - výchozí hodnota. Zpracovává bloky, jako by mezi nimi nebyl žádný prostor;
-break: ohraničující-box - umožňuje prostor mezi bloky;
-break: každý-box - zpracovává každý blok prvku samostatně a znovu čerpá pozadí individuálně pro každý z nich.
Existuje mnoho vlastností, které pomáhají přizpůsobit zobrazení pozadí je popsána nejčastější. Poznání pochází ze zkušenosti, takže praxe - nejlepší způsob, jak naučit CSS a HTML.
