Jak vytvořit obrázek pozadí v HTML a CSS. 3 jednoduché způsoby

Nastaví barvu zadního plánu z palety. Barva dědic vždy se shoduje s barvou prvku předka.
Pozdravy. V tomto článku chci říct o třech způsobech, jak umístit obraz jako pozadí celé stránky pomocí pouze HTML + CSS (bez použití JS).

Pozdravy. V tomto článku chci říct o třech způsobech, jak umístit obraz jako pozadí celé stránky pomocí pouze HTML + CSS (bez použití JS).

Takže požadavky na obrázek pozadí jsme následující:

  • 100% šířka a stránky pokryté
  • Váhy pozadí v případě potřeby (pozadí je nataženo nebo komprimováno v závislosti na velikosti obrazovky)
  • Vložte proporce obrázků (poměr stran)
  • Obrázek se zaměřil na stránce
  • Pozadí nezpůsobuje svitky
  • Řešení je maximálně crossbrawser
  • Žádné jiné technologie nejsou používány kromě CSS

Nastaví barvu zadního plánu z palety. Barva dědic vždy se shoduje s barvou prvku předka.

Metoda 1.

Podle mého názoru to je nejlepší způsob, protože je to nejjednodušší, stručné a moderní. Používá vlastnost CSS3 Velikost pozadí. které žádáme na značku Html. . Přesně tak Html. , ale ne Tělo. protože Jeho výška je větší nebo rovna výšce okna prohlížeče.

Nainstalujte pevné a soustředěný pozadí a poté upravte jeho velikost Velikost na pozadí: kryt .

Html { 

Obrázek na pozadí: URL (obrázky / background.jpg);

Pozadí-opakování: ne-opakování;

Pozice na pozadí: středové centrum;

Připojení na pozadí: pevné;

-Webkit-background-velikost: kryt;

-Moz-velikost-velikost: kryt;

-O-Size-velikost: kryt;

Velikost na pozadí: kryt; 
} 

Demo.

Tato metoda funguje

  • Chrome (libovolná verze)
  • Opera 10+.

Firefox 3.6+.

Safari 3+.

IE 9+.

Aby bylo možné obrázky rychle načíst, umístěte své stránky pouze z osvědčených poskytovatelů hostingu, například zaget.com 
Uživatelé a vyhledávače milují rychlé stránky. 

Obrázek na pozadí: URL (obrázky / background.jpg);

Metoda 2.

Tato metoda poskytuje použití prvku IMG, jehož velikost se bude lišit v závislosti na velikosti okna prohlížeče. Chcete-li natáhnout obraz na celou obrazovku, musí nastavit min-výšku a šířku s hodnotou 100%. A tak, že obraz není komprimován na menší velikost než originál, nainstalujte min-šířku s hodnotou stejné šířky obrázku.

Pokud je šířka okna menší než šířka obrazu, bude média dotaz použit k vyrovnání pozadí ve středu.

zdědit.

<img src = "/ obrázky / background.jpg" Class = "pozadí" />

img.background { Min-výška: 100%; Min-šířka: 640px; šířka: 100%; Výška: Auto;

Poloha: pevná; Top: 0; vlevo: 0;

/ * Závisí na velikosti obrázku * /

Obrazovka @Media a (max-šířka: 640px) { img.bg { и Vlevo: 50%; marže vlevo: -320px; } } } Demo.

Zdědí všechny vlastnosti rodičovského prvku

Tato metoda funguje v:

Všechny verze dobrých prohlížečů (Chrome, Opera, Firefox, Safari) IE 9+. и Metoda 3. . Dalším způsobem je následující: Opravte obrázek <IMG /> do levého horního rohu stránky a protáhněte jej pomocí vlastností min-šířky a min-výšku 100%, při zachování poměru stran. True, s tímto přístupem není obraz zaměřen. Tento problém je však vyřešen zabaleným obrázkem v <Div />, který děláme 2x velikosti okna. A samotný obraz se natahujeme a vložíme do centra. <DIV Class = "pozadí"> <img src = "/ obrázky / background.jpg" />

</ div> Div.background { <DIV Class = "pozadí"> Poloha: pevná;

Top: -50%;

Vlevo: -50%; } šířka: 200%; Výška: 200%; }

img { Pozice: absolutní; Top: 0;

vlevo: 0; Vpravo: 0; :

Dno: 0;

Marže: Auto; Min-šířka: 50%; Min-výška: 50%; } .

Tato metoda funguje v dobrých prohlížečích a tj. 8+.

Doufám, že tyto informace budou pro vás užitečné. Osobně používám tyto metody, zejména první. Jistě existují i ​​jiné způsoby, jak dát obrázek na zádech pozadí s CSS. Pokud o nich víte, podělte se o komentáře. Nastavit barvu pozadí a / nebo obrázek pro stránku nebo samostatnou položku je dost jednoduchý. Hlavní věcí je vědět, kde a jak to může být provedeno, stejně jako mít barevný kód a / nebo obrázek na pozadí. Je možné, že z tohoto článku se naučíte spoustu nových věcí, ale vytvořil jsem to speciálně pro začátečníky. Proto vše bude co nejkratší a podrobně současně. Hlavní věc je, že obdržíte nejen celkovou prezentaci a připravené příklady, ale také pochopení, jak udělat pozadí v HTML. Nastavení pozadí v HTML použijte střední doctype A začnu se skutečností, že Html5. Není možné nastavit pozadí pro web. Tato funkce byla rozhodnuta vydržet v CSS. Proto, pokud plánujete použít níže, a chcete získat platný » (opravit) Kód, musíte zůstat na typu přechodu dokumentu. Chcete-li to provést, vaše webová stránka by měla spustit s následující řádek: <! Doctype HTML Veřejnost "- // W3C // DTD HTML 4.01 » Přechodný // en "" http://www.w3.org/tr/html4/loose.dtd ">

Čas na praktické třídy

Jak je pozadí na webové stránce? (#)Pokud jste to vymysleli, porozumím tomu, jak je pozadí vytvořeno. A první věc je třeba poznamenat - to je rozdíl mezi

Barva pozadí

Pozadí obrázek

. Na začátku jde

Barva pozadí Vlevo: 50%; který povodňuje všechny dostupné stránky nebo jeho prvek. Opakované nahoře Pozadí obrázek }

. Vizuálně, to může být zobrazen následujícím způsobem: Pozice: absolutní; Top: 0;

Pozadí HTML dokumentu a jeho prvky

Po zklamání hlavních prvků kontroly pozadí, stejně jako jejich atributy, pokračujte přímo na analýzu konkrétního příkladu. V následujícím kódovém kódu se pokusil povolit všechny popsané prvky.

Druhá věc, kterou potřebujete vědět, je rozdíl mezi

Tělo dokumentu Vpravo: 0; :

prvek dokumentu

Tělo dokumentu

Zobrazeno v kódu HTML značky webové stránky

Tělo. který obsahuje veškerý obsah webové stránky. Samozřejmě, že pozadí dokumentu dokumentu nemůže být transparentní. Pokud není zadáno pozadí těla dokumentu, použije se výchozí hodnota zadaná v nastavení prohlížeče. Prvky stránky jsou uvnitř značky }

. Je pozoruhodné, že můžete nastavit barevný a / nebo obrázek pozadí pomocí HTML na všechny prvky dokumentu. Obrázek na pozadí lze například zadat pouze pro tabulky. Ve výchozím nastavení mají obvykle průhledné pozadí. Pozice: absolutní; Top: 0;

Atribut BGColor vytvořit barvu pozadí

Aby se zeptal

Dokument nebo jeho prvky se používá atribut Výška: 200%; и Pozadí obrázek bgColor. , např.: <Tělo bgColor = "# ec008c">

<! - Tělo dokumentu ->

</ Tělo>

V tomto případě jsme nastavili barvu pozadí pro stránku jako celek. Ale příklad, jak nastavit barvu pozadí pro tabulku, ve značce Stůl <Tabulka BGColor = "# EC008C"> <tr> <td> text s pozadím </ td> </ tr> </ tabulka>

Je pozoruhodné, že barva pozadí v tabulce lze také zadat pro řádky ve značce

Tr A pro jejich buňky ve značce Td.

Jak zjistit barevný kód? Pravděpodobně jste si již všimli, že barva v HTML je nastavena na speciální kód Html. , např.:

# EC008C.

  • . Chcete-li zjistit kód, který potřebujete barvu, můžete použít jednu z grafických editorů. Například ve Photoshopu můžete použít "
  • Keyroper nástroj.
  • (Pipeta)

Získat barvu z bodu na obrázku. Potom musíte kliknout na výslednou barvu na panelu nástrojů a v okně, které se otevře "

Barevný výběr. (Výběr barev) Kopírovat barevný kód. Upozorňuji na skutečnost, že tento kód bude bez znamení mřížky Na začátku bude toto znaménko přidáno ručně.

Můžete také použít mnoho online služeb: 
Jejich princip práce je ještě jednodušší - klikněte na požadovanou barvu a získejte IT kód. Atribut pozadí vytvořit obrázek pozadí Stejně jako v případě barvy pozadí av případě
Musíte použít speciální atribut, a to 
Pozadí. 
<Tělo pozadí = "/ 2014/06 / bg.jpg">

В Html. V tomto případě se ptáme na pozadí obrázku pro stránku jako celek. Je pozoruhodné, že vzhledem k omezením velikosti obrazu se bude opakovat, například: Jak vidíte, když je opakování, přechod mezi obrázky je patrný. Proto se často používají speciální snímky, kde je tento okamžik zohledněn. Ale příklad, jak nastavit obrázek pozadí pro tabulku, ve značce

<tabulka pozadí = "/ 2014/06 / bg.jpg"> <tr> <td> text s pozadím </ td> </ tr> </ tabulka> Html. Je pozoruhodné, že obraz na pozadí lze nastavit pouze pro tabulku jako celek a / nebo jeho samostatnou buňku. Pro řetězec nebude fungovat. Atribut pozadí vytvořit obrázek pozadí .

Absolutní a relativní cesta k obrázku (Výběr barev) Samostatně stojí za to věnovat pozornost Obraz na pozadí adresy . V tomto případě se používá relativní cesta k obrázku, tj. Adresa je uvedena na umístění obrazového souboru do souboru webové stránky. Tato volba nemůže být nazývána zvláště úspěšná. Nejlepší je použít absolutní cestu k obrázku, tj.

jeho úplná adresa URL <Tělo pozadí = "/ obrázky / bg.jpg"> .

V tomto případě nebudete mít sourozenější problémy. Pro více o tom si můžete přečíst zde.

Shrnule si to 
Pomocí atributů morálně zastaralé, protože pro platnost kódu HTML budete muset používat přechodné DOCTYPE.

. Chcete-li nastavit barvu pozadí v HTML, používá speciální kódy, které můžete zjistit v grafickém editoru nebo pomocí speciálních online služeb. Obrázek na pozadí je duplikován v ocasech oblasti přidělené a leží na horní části barvy pozadí. Chcete-li zadat obrázek na pozadí, je lepší použít svou úplnou adresu URL. Mám na tom všechno. Děkuji za pozornost. Hodně štěstí!

Krátký odkaz: http://goo.gl/03tsnz Jak udělat pozadí pro web? Každý pokoj bude vypadat mnohem lépe, pokud její podlaha stoupá drahý perský koberec. Tak horší vaše stránky? Možná je to čas a jeho podlaha " soubor
  • »Drahý elegantní ručně vyráběný palác. Rozumíme více o tom, jak udělat pozadí stránky:
  • Stává se to, že starý design webu již přijde. A chci něco nového a chutného. A nový design bude takový, pokud vaříte s vlastními rukama.
  • Ale změnit úplně celý design zdroje sami - věc je nevděčná. Ano, a ne každý má o tom něco. "
  • naostřený

"Ruce. Proto je nejjednodušší osvěžit starou šablonu, změnou barvu pozadí zdroje nebo jeho obrazu na pozadí.

Existuje několik způsobů, jak změnit pozadí na webu. To využívá příležitosti. 
CSS. nebo . Mnohé z vlastností pro práci s pozadím má však stejný název a metodika aplikace v těchto webových technologiích.
  • Jako pozadí můžete použít více položek: Barva; ;
  • Obrázek na pozadí;
  • Texturní obraz. Podrobněji se budeme zabývat používáním každého z nich. Chcete-li nastavit barvu pozadí zezadu pro web, použije se vlastnost.

barva pozadí.

Atribut stylu 

Styl. . To znamená, že nastavit základní barvu pro webovou stránku, je třeba jej zaregistrovat uvnitř značky <Body>. Například: <Body styl = "background-color: # 55d52b"> <p> Pozadí webu # 55d52b </ p> </ tělo>

Kromě hexadecimálního barevného kódu je hodnota podporována ve formátu klíčového slova nebo

Rgb. 

. Příklady:

<Body Style = "Barva pozadí: RGB (51,255,153)"> <p> Pozadí webové stránky RGB (23,113,44) </ p> </ tělo> <Tělový styl = "background-color: zelená"> <p> Pozadí zelené webové stránky </ p> </ tělo> Nastavení barvy pozadí pomocí klíčových slov má řadu omezení ve srovnání se zbývajícími dvěma způsoby.

Celkem 16 klíčová slova jsou podporována pro nastavení barvy. Tady jsou některé z nich:

Bílá, červená, modrá, černá, žlutá jiný. Proto, aby bylo možné nastavit pozadí webu

Je lepší použít hexadecimální formát nebo 

Kromě výběru barvy jsou k dispozici další nastavení. Pokud majetek Nastavit hodnotu Průhledný

Pozadí stránky se stane transparentní. Tato hodnota je ve výchozím nastavení přiřazena k této vlastnosti. Nyní zvažte možnost hypertextového jazyka nainstalovat vzor pozadí pro web. Je možné jej využít nemovitosti. Obrázek na pozadí.

Příklad: 

<Body Style = "Background-Image: URL (IMG_1809.jpg)"> </ Body>

Jak je vidět z kódu, vazba obrazu se vyskytuje přes cestu

Url

Publikováno v závorkách. Ale ne všechny obrázky se ukázaly být tak velké, aby zaplnily celou oblast obrazovky s jejich velikostí. Podívejme se, jak se zobrazí menší obrázek.

Předpokládejme, že vyvíjíme místo o poezii, a jako substrátu musíte použít obraz pegasusu. Okřídlený kůň bude personifikovat svobodu kreativního myšlení o básníka!

Potřebujeme, aby obraz byl zobrazen ve středu obrazovky jednou. Ale bohužel prohlížeč nerozumí našim vznešeným toumům. A zobrazuje menší obrázek pro pozadí webu tolikrát, kolikrát může oblast obrazovky pojmout:

Pravděpodobně čtyři usmívající se koně s křídly básníků budou příliš mnoho pro inspiraci. Zakázejte proto klonování našeho pegasu. Udělej to pomocí nemovitosti

opakování pozadí. . Možné hodnoty: Opakování-X - Opakování obrazu pozadí vodorovně;

Takže usnadneme úkol nastavit zadní pozadí ze dvou obrázků: animace a pravidelný obraz. V tomto případě bude animace GIF pevná a výkres je posouván spolu s obsahem stránky.

Opakovat-y - svisle;

Opakujte - na obou osách;

Ne-opakování - opakování je zakázáno.

Mezi uvedenými možnostmi se zajímáme o poslední. Před změnou pozadí webu jej používáme ve vašem kódu:

<Body Style = "Background-Image: URL (3.jpg); pozadí-opakování: ne-opakování"> </ body>

Ale samozřejmě to je lepší, pokud se nacházíte v našem letišti uprostřed obrazovky. Vlastnictví

Pozice na pozadí Jen je určen k umístění vzoru pozadí na stránce. Nastavte souřadnice umístění několika způsoby:
. To znamená, že nastavit základní barvu pro webovou stránku, je třeba jej zaregistrovat uvnitř značky <Body>. Například: Klíčové slovo (
<Tělo pozadí = "/ obrázky / bg.jpg"> Horní, dole, střed, vlevo, vpravo)
nebo Procenta - odpočítávání začíná z levého horního rohu;
Každý pokoj bude vypadat mnohem lépe, pokud její podlaha stoupá drahý perský koberec. Tak horší vaše stránky? Možná je to čas a jeho podlaha " V jednotkách opatření (
(Výběr barev) Pixels.
). Používáme nejjednodušší volba pro centrování:

<Body Style = "Background-Image: URL (3.jpg); Pozadí-repeat: Ne-repeat; Pozadí Pozice: Horní centrum"> </ bod

Stává se, že je třeba opravit polohu výkresu při rolování. Proto před vytvořením obrázku webu použijte speciální vlastnost.

Příloha na pozadí.

. Platné hodnoty: <ul> <li> Scroll; </ li> <li> pevné. </ Li> </ ul>

Potřebujeme poslední význam. Nyní bude kód našeho příkladu vypadat takto: [/ HTML] 
<Body Style = "Background-Image: URL (3.jpg); Pozadí-opakování: Ne-repeat; Pozadí Pozice: Horní centrum; Připevnění pozadí: Fixed"> </ Body> 

V prvním příkladu, pro pozadí jsme použili velkou a krásnou pouštní krajinu. Ale pro takovou krásu musíte zaplatit plné. Hmotnost obrazu prováděného ve vysoké kvalitě může dosáhnout několika megabajtů.

Tento svazek nemá vliv na rychlost stahování stránky prohlížeče s vysokorychlostním připojením s Internetem. Ale co mobilní internet, při použití, který stahování několika "

metry

"Bude to hodně času?

"Bude to hodně času? Všechny tyto problémy jsou řešeny pomocí textury pozadí. Používá malý obraz jako vzor textury. I pod podmínkou jeho více opakování je vzor načten pouze jednou.

Chcete-li vytvořit tmavé pozadí pro webové stránky Tělo. Photoshop. Tělo. , Vytvořte obrázek ve formě pásu dlouhého 1200 pixelu a šířce 15 pixelů. Pak používáme jednoduchý černobílý gradient a připojením výsledné textury na stránku webu:

<Body Style = "Background-Image: URL (1.png); Barva: RGB (0,51,204)"> </ Body>

Pro přehlednost jsme přidali text a nastavili ji barvu pomocí vlastnosti. Tělo. Barva Tělo. . To se stalo:

  • Výška: 200%; Všechny výše popsané vlastnosti jsou také použitelné pro kaskádové listy. Vytvořte pozadí webu
  • Pozadí obrázek CSS.
  • Přepisováním kódu jednoho z našich předchozích příkladů: <Head> <název> Dokument Untitled </ Název> <styl typu = "text / css"> tělo {background-image: url (3.jpg); pozadí-opakování: ne-repeat; Pozice na pozadí: TOP CENTRESS; Background-upevnění: fixní;} </ Styl> </ head> <tělo> </ tělo>
  • Výsledek bude podobný. No, podívali jsme se na všechny možnosti, jak změnit pozadí na webu. Nyní zůstane pouze vytvořit výkres budoucího koberce a šířit jej na stránkách vašeho zdroje. Ale tohle je vaše ruka.
  • Dobrý den každému, kdo se naučí a naučí se něco nového! Věnovali jste někdy pozornost vzhledu stránek při vývoji tvůrců byli líní uspořádat pozadí stránek? A otočil jsem se. Vypadá to porážka. Často, kvůli nedostatku obvyklých separací mezi různými typy informací, je smíchán a jednoduše zmizí touhu dále podívat na takový webový zdroj. Tak, že takové problémy se stalo s vaším projektem, rozhodl jsem se napsat článek na toto téma: "Jak udělat pozadí stránek v HTML." Po přečtení publikace se naučíte, s jakými nástroji můžete nastavit design pozadí, jak udělat pozadí pevné nebo měnící se a mnohem více, což pomůže, aby vaše webové stránky atraktivní. Začněme!
  • Základní nástroje pro nastavení webových stránek pozadí Chcete-li nastavit obrázek na pozadí, vývojáři webového jazyka poskytli atribut pozadí. Je k dispozici v HTML i CSS.
  • V jazyce Markup se jedná o atribut tagu těla a ve stylu tabulek - univerzální vlastnost, která umožňuje nastavit až 5 vlastností zadního plánu současně. Souvislosti je poměrně flexibilní prvek, který lze použít k úkolu pozadí jako barva, barevný obraz nebo dokonce animace. Abyste nainstalovali obrázek pozadí přes jednotku HTML <Body> Stačí napsat takový kód:
  • <Body Background = "Adresa souboru"> ... </ BODY> A namísto slov "Adresa souboru" vložte cestu k obrázku.
  • Všimněte si však! Pokud ve formě pozadí chcete zobrazit monochonské plátno uvedené z palety barev, pak se provádí pomocí atributu BGColor. Například <tělo bgcolor = "# 000000"> ... </ tělo>, zeptali jsme se na naše stránky černé pozadí.
  • Barvy v CSS a HTML jsou nastaveny buď anglickým slovem (například červenými) nebo speciálním kódem, který se skládá ze znamení # a šest znaků po něm (například # FFDAB9). Při psaní druhé možnosti ve specializovaných softwarových produktech pro vývojáře se paleta automaticky zobrazí před vámi. Pokud jste se právě začali učit tyto webové jazyky, pak barevný kód může být spásen na internetu.

Pozadí jako vlastnost v kaskádovém stylu stolů Výška: 200%; :

Je nastaven nebo v samostatném souboru s CSS styly nebo v prvku <Style>. S touto vlastností můžete nainstalovat pozadí vzorů nebo barvy, zadat počáteční umístění na stránce, nastavit opakované a pevné snímky. Pro větší jasnost jsem vytvořil definice v tabulce. 

Parametry Účel

Slouží k instalaci pevného nebo rolovaného obrazu spolu s obsahem webu. Se stane pevně, svitek a zdědit

Nastaví obrázek na pozadí. Může být indikován současně s barvou. Poté se zobrazí, dokud nebude obraz zcela naložen.

Nastaví počáteční umístění objektu pro předchozí parametr. Horizontálně označuje vpravo, doleva a střed a vertikálně - spodní, horní a střed. Kromě toho můžete zdědit polohu (dědic), nastavený v procentech, pixelech a dalších rozměrech 

Použijte při použití atributu pozadí obrázku. Reguluje, jak se obraz opakuje. Můžete zadat 2 hodnoty: pro horizontální a vertikální. Existují charakteristiky: ne-opakování, opakování, opakování-x, opakování-y, dědictví, prostor

Добавить комментарий