Obrázek na pozadí html. Barva pozadí. Zkrácená verze celé té dobroty

27. 12. 2014 55,8 tis

Každá místnost bude vypadat mnohem lépe, pokud bude její podlaha pokryta drahým perským kobercem. Proč je tedy váš web horší? Možná je čas „pokrýt“ podlahu drahým elegantním kobercem vlastní výroby. Podívejme se blíže na to, jak vytvořit pozadí pro web:

Pozadí pro web

To se stává starý design Už jsem ze stránek unavený. A chci něco nového a chutného. A Nový design bude to tak, když to uvaříte vlastníma rukama.

Ale úplně změnit celý design zdroje svépomocí je nevděčný úkol. A ne každý má na tento úkol správně vycvičené ruce. Proto je nejjednodušší osvěžit stará šablona, měnící se barva pozadí zdroj nebo jeho obrázek na pozadí.

Existuje několik způsobů, jak změnit pozadí na webu. K tomuto účelu se používají Funkce CSS nebo html. Ale mnoho vlastností pro práci s pozadím má stejný název a způsob aplikace v těchto webových technologiích.

Základy práce s pozadím v html

Jako pozadí lze použít několik prvků:

• Barva;
• Obrázek na pozadí;
• Obrázek textury.

Podívejme se na použití každého z nich podrobněji.

Chcete-li nastavit barvu pozadí webu, použijte vlastnost background-color stylu atribut stylu. To znamená, že chcete-li nastavit hlavní barvu webové stránky, musíte ji napsat do značky . Například:

Pozadí webu #55D52B

Až na hexadecimální kód barvy jsou podporované hodnoty ve formátu klíčového slova nebo RGB. Příklady:

Pozadí webu rgb (23,113,44)

Pozadí webové stránky zelené

Nastavte barvu pozadí pomocí klíčová slova má ve srovnání s ostatními dvěma metodami řadu omezení.

HTML podporuje pouze 16 klíčových slov pro nastavení barev. Zde je několik z nich: bílá, červená, modrá, černá, žlutá a další.

Pro nastavení pozadí pro html web je proto lepší použít hexadecimální nebo RGB formát.

Kromě výběru barev jsou k dispozici další možnosti přizpůsobení. Pokud je vlastnost background-color nastavena na transparentní , bude pozadí stránky průhledné. Tato hodnota je této vlastnosti přiřazena ve výchozím nastavení.

Nyní se podíváme na možnosti hypertextového jazyka pro nastavení obrázku na pozadí webu. To lze provést pomocí vlastnosti background-image.

Jak můžete vidět z kódu, obrázek je propojen přes cestu url uvedenou v závorkách. Ale ne všechny obrázky jsou tak velké, aby jejich velikost zaplnila celou plochu obrazovky. Podívejme se, jak se zobrazí menší obrázek.

Předpokládejme, že vyvíjíme webovou stránku o poezii a jako pozadí potřebujeme použít obrázek Pegase. Okřídlený kůň zosobní svobodu básníkova tvůrčího myšlení!

Potřebujeme, aby se obrázek jednou zobrazil uprostřed obrazovky. Ale bohužel prohlížeč nechápe naše vznešené touhy. A zobrazuje menší obrázek na pozadí webu tolikrát, kolikrát se na plochu obrazovky vejde:

Možná budou čtyři usměvaví koně s křídly příliš inspirací pro básníky. Proto zakazujeme klonování našeho Pegase. Děláme to pomocí vlastnosti background-repeat. Možné hodnoty:

• repeat-x – opakování obrázek na pozadí horizontálně;
• repeat-y – svisle;
• opakovat – na obou osách;
• no-repeat – opakování je zakázáno.

Z uvedených možností nás zajímá ta poslední. Před změnou pozadí webu jej používáme v našem kódu:

Ale samozřejmě by bylo lepší, kdyby se náš leták nacházel uprostřed obrazovky. Vlastnost background-position je přesně určena pro umístění obrázku na pozadí na stránce. Souřadnice polohy můžete nastavit několika způsoby:

• Klíčové slovo ( nahoře, dole, uprostřed, vlevo, vpravo);
• Procento – počítání začíná od levého horního rohu;
• V jednotkách měření (pixely).

Využijme toho nejvíce jednoduchá možnost centrování:

Stává se, že při rolování potřebujete opravit polohu obrázku. Proto před vytvořením obrázku jako pozadí webu použijte speciální vlastnost background-attachment . Hodnoty, které přijímá, jsou:

• svitek;


• pevný.

Potřebujeme poslední hodnota. Nyní bude náš ukázkový kód vypadat takto:

Webové stránky textury pozadí

V prvním příkladu jsme jako pozadí použili velkou a krásnou pouštní krajinu. Ale za takovou krásu musíte zaplatit v plné výši. Hmotnost vytvořeného obrazu vysoká kvalita, může dosáhnout několika megabajtů.

Tento objem žádným způsobem neovlivňuje rychlost načítání stránky prohlížeče, když vysokorychlostní připojení s internetem. Ale co mobilní internet, které bude trvat dlouho, než se načte několik „metrů“?

Hezký den všem, kteří se chtějí naučit něco nového! Všimli jste si někdy? vzhled, při jehož vývoji byli tvůrci líní navrhovat pozadí stránek? A já to udělal. Vypadá to špatně. Často kvůli nedostatku obvyklých předělů mezi námi odlišné typy informace se zamíchají a prostě není chuť se na takový webový zdroj dívat dál.

Aby se mi taková katastrofa nestala, rozhodl jsem se napsat článek na téma: „Jak vytvořit pozadí stránky v html“. Po přečtení publikace se dozvíte, jaké nástroje můžete použít k nastavení designu pozadí, jak pozadí opravit nebo změnit a mnoho dalšího, co pomůže zatraktivnit váš web. Nyní začněme!

Základní nástroje pro nastavení pozadí webových stránek

Pro nastavení obrázku na pozadí poskytli vývojáři webových jazyků atribut pozadí. Je k dispozici jak v , tak v css.

Ve značkovacím jazyce se jedná o atribut značka těla, a ve stylech - univerzální vlastnost, která umožňuje nastavit až 5 charakteristik pozadí současně. Pozadí je poměrně flexibilní prvek, který lze použít k nastavení pozadí ve formě jedné barvy, barevného obrázku nebo dokonce animace.

Chcete-li tedy nastavit obrázek na pozadí přes html jednotka stačí napsat následující kód: ...

a místo slov „adresa souboru“ vložte cestu k obrázku.

Nicméně, prosím, na vědomí! Pokud chcete jako pozadí vidět plnou barvu, daná hodnota z palety barev, to se provádí pomocí atribut bgcolor.

Například, ...

, nastavili jsme pro naše stránky černé pozadí.

Nastavují se také barvy v css a html anglické slovo(například červená), popř speciální kód, který se skládá ze znaku # a šesti znaků za ním (například #FFDAB9).

Při psaní druhé možnosti ve special softwarových produktů Vývojářům se paleta automaticky objeví před vámi. Pokud jste se právě začali učit tyto webové jazyky, můžete si barevný kód vyhledat na internetu.

Pozadí jako vlastnost v kaskádových stylech

Je specifikováno buď v samostatný soubor S css styly nebo v prvku

Na tomto místě můžeme shrnout naši práci. Přidejte se k řadám mých věrných odběratelů, ptejte se, pokud je něco nejasné, a nebuďte chamtiví s odkazem na můj blog, ale sdílejte jej se svými přáteli. Přeji vám příjemný zážitek z učení. Ahoj!

S pozdravem Roman Chueshov

V HTML obrázky vloženo pomocí značky img.
Štítek img- prázdný, obsahuje atributy a nemá uzavírací značku.

Atribut se používá k zobrazení obrázku na stránce src. Src pochází ze zdroje, což znamená Zdroj. Význam atribut src je url Snímky.

Řádek výše znamená, že obrázek je ve stejném adresáři (složce) jako samotný html soubor, na který odkazuje tento obrázek. Řekněme, že máte složku html, který obsahuje index.html s výše uvedeným kódem a samotný obrázek s názvem obrázek.jpg.

V tomto případě při otevírání index.html Tento obrázek uvidíte ve svém prohlížeči. Pokud to máte někde jinde (složka výše nebo níže), tak místo toho uvidíte buď bílé pole, nebo malý obdélník s červeným křížkem (obrázek se nepodařilo načíst).

Obrázky nejsou vždy umístěny ve stejném adresáři (složce) jako samotný soubor, takže specifikování cest bude podrobněji popsáno o něco později.

atributy tagu img

Kromě src img tag Existují další atributy, které jsou zodpovědné za velikost zobrazeného obrázku, jeho titulek a tak dále.

src- adresa obrázku
šířka- šířka obrázku
výška- výška obrazu
titul- podpis, který se objeví, když najedete na obrázek
alt - alternativní text. Potřebné pro vyhledávací robot a indexování obrázků
okraj- tloušťka okraje obrázku. 0 – bez ohraničení, 1 – nejtenčí ohraničení atd.

Adresa vloženého obrázku (příklady)

Obvykle, snímky nejsou uloženy ve stejné složce jako html soubor. Za tímto účelem se ve stejném adresáři vytvoří složka snímky(nebo img, podle chuti a barvy). A už je do toho všechno vloženo požadované obrázky. V případě odděleného úložiště budete muset zadat jinou adresu pro atribut src

Pokud je soubor ve složce výše, pak ano

Můžete také vložit obrázek z jiného webu úplně, aniž byste jej stahovali do vaší složky. K tomu musíte mít stabilní připojení na internet a přibližně následující kód, ve kterém do adresy zadáte adresu obrázku na internetu:

Obrázek na pozadí v HTML

Tak jako obrázek na pozadí se mohou objevit soubory s příponou gif, jpg, jpeg A png. Pokud je velikost obrázku menší než okno prohlížeče, obrázek bude automaticky i nadále vyplňovat zbývající pozadí. V tělo použijte atribut Pozadí, ve kterém určíme cestu k obrázku

Barva pozadí stačí důležitý prvek jakoukoli webovou stránku. Za prvé nastavuje požadovanou náladu a celkovou náladu webu a za druhé usnadňuje vnímání textu.

Barva pozadí webové stránky se nastavuje pomocí atributu bgcolor značky .

Příklad 1: Změna barvy pozadí

Barva může být specifikována v hexadecimální hodnotu nebo jeho jménem.

Navzdory skutečnosti, že můžete zadat jakoukoli barvu pozadí, většina stránek používá bílé pozadí a černými písmeny, jako nejběžnější možnost.

Obrázek na pozadí

Jako pozadí můžete použít jakýkoli vhodný obrázek. Pozadí by nemělo odvádět pozornost od textu, ale mělo by s ním dobře splývat barevné schéma webové stránky a být malé, aby se rychle načítaly. Pokud po výše uvedeném stále chcete přidat obrázek na pozadí na stránku, měli byste použít atribut pozadíštítek .

Příklad 2: Přidání tapety

Pokud obrázek menší velikost obrazovce monitoru, bude reprodukován vodorovně a svisle.

Protože se obrázek na pozadí načítá pomaleji než barva pozadí, můžete skončit s nečitelným textem, dokud se obrázky nenačtou. Totéž se může stát, pokud jsou v prohlížeči zakázány obrázky. Proto se doporučuje vždy nastavit barvu pozadí spolu s obrázkem pozadí (příklad 3).

Příklad 3: Použití obrázku na pozadí a barvy pozadí

Pevné pozadí

Ve výchozím nastavení se při použití posuvníku obrázek na pozadí pohybuje s obsahem webové stránky. internet Explorer umožňuje znehybnit pozadí pomocí atributu tagu bgproperties ="fixed " .

Příklad 4: Nastavení pevného pozadí

Zadáním atributu bgproperties, jak je znázorněno v příkladu 4, zůstane obrázek pozadí na webové stránce nehybný, ale text, grafika a další prvky se budou pohybovat pomocí posuvníku.