Opakující se pozadí. Bezešvé pozadí generátory. Přípravné práce na našem zázemí

Vlastnost CSS pozadí-opakování umožňuje určit, zda se bude obrázek pozadí pro sadu prvků pomocí vlastnosti opakovat. Je možné nastavit režim opakování obrazu vodorovně, svisle nebo v obou směrech současně. Ve specifikaci CSS3 umožňuje zadat více hodnot oddělených čárkami pro každý z obrázků na pozadí. Ve výchozím nastavení se obrázek na pozadí opakuje svisle a vodorovně.

Vlastnost background-repeat podporují všechny moderní prohlížeče.
Ve specifikaci CSS3 vlastnost background-repeat podporuje vícevrstvá pozadí a umožňuje určit, zda se bude obrázek na pozadí opakovat pro každé z nich. V tomto případě jsou hodnoty uvedeny oddělené čárkami.

Syntax

opakování na pozadí: styl opakování[, styl opakování]*

Kde styl opakování— jedna z podporovaných hodnot.

Hodnoty

Vlastnost background-repeat může mít jednu nebo dvě hodnoty. Pokud jsou zadány dvě hodnoty, první hodnota určuje horizontální režim opakování, druhá – vertikální režim opakování.
Vlastnost background-repeat může nabývat následujících hodnot:

No-repeat Obrázek na pozadí určený vlastností background-image se neopakuje. Ekvivalent k no-repeat no-repeat repeat Obrázek na pozadí se opakuje svisle a vodorovně. Ekvivalent k repeat repeat repeat-x Obrázek na pozadí se opakuje vodorovně. Ekvivalent k repeat no-repeat repeat-y Obrázek na pozadí se opakuje svisle. Ekvivalent k no-repeat repeat inherit Hodnota se dědí nadřazený prvek prostor Obrázek na pozadí se opakuje tolikrát, aby zaplnil celý prostor bez oříznutí obrázku. V případě potřeby se mezi snímky přidá výplň. Ekvivalent k prostoru zaokrouhlený Obrázek na pozadí se opakuje tolikrát, aby zaplnil celý prostor bez oříznutí obrázku. V případě potřeby se obrázky upraví. Ekvivalent kulatého kola

Dobrý den, milí čtenáři tohoto blogu. Dnes se podíváme na pět CSS pravidel, která umožňují nastavit pozadí pro libovolný prvek v Html – background-position (obrázek, opakování, barva, příloha). Nezapomeňme také zmínit složené pravidlo pozadí.

Na tom není nic složitého, ale je určité jemnosti a nuance, které potřebujete znát a již hotová šablona(pamatujte na to, co vám pomůže odhalit všechny jemnosti a nevýhody jakéhokoli designu).

Ještě jednou připomenu, že tento článek je součástí série a nejlepší by bylo začít studovat značkování stylů od začátku, a to článkem o tom, co je CSS a k čemu se používá, a pak postupovat v uvedeném pořadí v referenční knize. I když je to v každém případě na vás, ale nyní si promluvme o nastavení pozadí.

Barva, barva pozadí a obrázek pozadí

Nejprve se podívejme, jak je nastavena barva HTML prvky používáním Pravidla barev CSS. Ve skutečnosti je zde vše jednoduché. Syntaxe je zcela normální a můžete nastavit barvu podle toho, jak byla provedena v jazyce hypertextové označení. Jak si pamatujete, umístěte za znak hash (hash - „#fe35a3“) nebo pomocí tří číslic, pokud se první shoduje s hodnotou druhé, třetí se čtvrtou a pátá se šestou ( barevný kód „#aa33ff“ lze stručně zapsat jako „a3f“).

Také barvy v Html a CSS kód mohou být reprezentovány jako slova (například „červená“), ale nejčastěji se používá hexadecimální kód:

Barva: #303

Jako příklad jsem vybarvil tento malý odstavec stejnou barvou jako výše (#303). Nyní se mírně liší od barvy všech ostatních odstavců (tmavší), která je nastavena na #555 palců CSS soubor mnou používané WordPress témata. Ale nastavení barvy pomocí barvy je celkem jednoduché, ale s pozadím to bude trochu složitější.

Tak, pro pozadí v Css Existuje pět pravidel, která lze v případě potřeby spojit do jednoho. Chcete-li je zobrazit, můžete přejít na aktuální stránku specifikace W3C a vyhledat cokoli se slovem Pozadí:

1. barva pozadí - pomocí tohoto pravidla nastavujete barvu pozadí pro libovolný HTML prvek. Můžete použít buď kód, nebo název odstínu, tzn. vše je úplně stejné jako při použití barvy.

obrázek na pozadí - s ním můžete použít obrázek jako pozadí (ale určitě si o tom přečtěte, protože těžké obrázky zpomalí načítání stránek), cesta ke které bude uvedena ve funkci url ().

Když se podíváte na specifikaci, uvidíte to výchozí barva pozadí jakýkoli prvek bude průhledný (výchozí hodnota pravidla je „background-color:transparent“). Pravda, v prvcích to nebude standardně průhledné, protože Tento systémové prvky a s nimi je vše jiné a odlišné od běžných značek hypertextového značkovacího jazyka.

Barva pozadí je standardně nastavena (šest nebo tři číslice). hexadecimální kód, nebo slovo):

Barva pozadí:#FEFCDE

Například pozadí tohoto odstavce je specifikováno pomocí background-color s barevným kódem uvedeným výše.

Všechna ostatní čtyři pravidla CSS ovlivní pouze obrázek na pozadí, který lze nastavit pro jakýkoli HTML prvek a v případě potřeby přesně umístit. Který grafický soubor bude použit, lze určit pomocí obrázek na pozadí.

Pokud se podíváte na specifikaci značkovacího jazyka, uvidíte, že výchozí obrázek na pozadí je „žádný“ (tj. pro pozadí není použit žádný obrázek). No, pokud to stále potřebujete, pak ve funkci url() budete muset uvést cestu k němu:

Background-image:url(https://site/image/comment_top_focus.gif);

Například pro tento odstavec jsem použil grafický soubor s pozadím, jehož cesta je popsána výše. Vidíte, že celá oblast vyhrazená pro tento odstavec je pokryta opakujícím se obrázkem, který v originále vypadá takto:

Tito. při použití pouze jednoho pravidla pro obrázek na pozadí určující cestu k grafický soubor, bude stejný obrázek násoben jak vertikálně, tak horizontálně, dokud nepokryje celou oblast přidělenou na webové stránce pro tento konkrétní HTML prvek (v našem příkladu to byl odstavec). Proč se to děje?

Background-repeat - opakování obrázku na pozadí

Ano, protože jsme nezadali žádnou hodnotu pro pravidlo CSS pozadí-opakování, což znamená, že pro něj bude použita výchozí hodnota. Pohledem do specifikace zjistíme, že tato hodnota odpovídá „repeat“ (opakování obrázku na všech osách). Odpověď přišla přirozeně.

Proto s opakováním na pozadí můžeme spravovat opakování obrázku na pozadí. Toto pravidlo může mít pouze čtyři významy:




Background-position - umístění na pozadí

Nyní vyvstává otázka, je možné posunout obrázek na pozadí zleva? horní roh oblast omezující velikost prvku. Samozřejmě můžete a pro tento účel existuje samostatné pravidlo. pozadí-pozice:



Při pohledu na specifikaci CSS je jasné, proč je obrázek na pozadí ve výchozím nastavení přitlačen přesně k levému hornímu okraji oblasti prvku Html. Protože "0% 0%" je výchozí hodnota pro pravidlo pozice na pozadí.

No, kdy je to pravidlo? výslovně není pro prvek zadán (jako v našem případě), pak prohlížeč vybere jeho výchozí hodnotu, která je akceptována ve specifikaci (všimněte si, že souřadnicové osy v CSS jsou hlášeny přesně od levého horního okraje plochy prvku).

Ze specifikace je také zřejmé, že pro umístění obrázku na pozadí pomocí background-position můžete použít jak relativní (procenta), tak absolutní hodnoty (například ). Můžete také použít slova, která budou odpovídat určitým digitálním hodnotám. Ale nejdřív.

Při nastavování umístění obrázku na pozadí pomocí absolutní jednotky v pozici na pozadí se pro určení její konečné pozice používá následující princip:

Tito. prohlížeč vypočítá zadané posuny podél os X a Y od počátku oblasti, ve které je objekt umístěn, k počátku samotného obrázku. Například v tomto odstavci jsem umístil obrázek na pozadí pomocí pozice na pozadí pomocí následujících pravidel CSS:

Background-image:url(https://site/image/logo.png); background-repeat:no-repeat; background-position:400px 25px;

Upozorňujeme, že je v v tomto případě budou zarovnány do středu oblasti zobrazení, a nikoli do středu oblasti přidělené pro tyto odstavce. Je jasné, že ve skutečnosti takové umístění obrázku na pozadí pravděpodobně nebude použito.

Pokud však nastavíte pevnou pozici pozadí pro prvky, jako je Body nebo Html (tj. ve značkách, které pokrývají celou webovou stránku), pak tento obrázek bude vždy vidět v oblasti zobrazení a přesně tak se používá Vlastnost CSS pozadí přílohy v moderním blokovém uspořádání.

Je jich víc prefabrikované pravidlo Pozadí, který umožňuje spojit všech pět výše popsaných pravidel v jedné láhvi. Hodnoty pro všech pět v kombinované verzi lze navíc použít v libovolném pořadí a v libovolném množství (jsou jedinečné a prohlížeč si je navzájem nezamění). Vše, co výslovně neurčíte, prohlížeč započítá. rovna hodnotě výchozí.

Png) bez opakování 50 %;

Pro srozumitelnost je na tento odstavec použito vzorové pravidlo prefabrikace. Nebylo to hezké, ale to není to hlavní. Pro tento odstavec se používá výplň pozadí zvláštní žluť a také používá obrázek loga Liveinternet zarovnaný na střed odstavce. Protože Pokud pravidlu pro připojení na pozadí není zadána žádná hodnota, použije se hodnota posuvníku (výchozí).

Pokud chcete pro některý prvek nastavit pouze barevnou výplň a neobtěžovat se obrázkem na pozadí, můžete to udělat takto:

Barva pozadí:#FEFCDE

napsat:

Pozadí:#FEFCDE

Protože na všem ostatním záleží prefabrikovaná pravidla bude automaticky převzato, což je to, co jste potřebovali.

Ať se vám daří! Brzy se uvidíme na stránkách blogu

Na další videa se můžete podívat na

");">


Mohlo by vás to zajímat

Styl seznamu (typ, obrázek, pozice) - Pravidla CSS pro přizpůsobení vzhled seznamy v HTML kód Jak nastavit rotaci barva pozadířádky tabulek, seznamů a dalších prvků Html na webu pomocí pseudotřídy n-tého potomka
Pozice (absolutní, relativní a pevná) - metody Html umístění prvky v CSS (pravidla vlevo, vpravo, nahoře a dole)
Plovoucí a jasné v CSS - nástroje blokové rozložení
Polohování pomocí Z-indexu a CSS pravidlo Kurzor pro změnu kurzoru myši

Začněme.

Přípravné práce na našem zázemí

Pro začátek stačí nakreslit nějaké pozadí.

1. tvoříme nový dokument 600 x 600 pixelů

1. Vybral jsem dvě barvy #F1F1F1 a #E4E4E4

1. Nyní na vytvořený dokument aplikujeme filtr Clouds. ( filtr -> Render -> Clouds)
2. Po kterém rozdíl mraky několikrát. ( filtr -> Render -> Rozdíl mraků) Obecně byste měli dostat něco takového:

Když teď toto pozadí zkuste to reprodukovat, dostaneme tento nehezký obrázek:

Jak vidíte, okraje spojování obrázků jsou velmi jasně viditelné, musíme se jich zbavit!

Rozřezání obrázku

1. Nejprve vytvořte kopii našeho pozadí v nové vrstvě a vyplňte pozadí bílou barvou

1. Nyní vytvoříme v levém dolním rohu výběr 450 x 450 pixelů

1. Stiskněte Shift + Ctrl + J, tímto způsobem vyřízneme vybranou oblast z vrstvy pozadí

1. Nyní z vrstvy, na které zůstal horní a pravý okraj, odstraňte pravý horní roh

1. Nyní vyberte pravý okraj a stiskněte Shift + Ctrl + J tak, aby horní a pravý okraj byly na samostatných vrstvách.

Nyní máme čtyři vrstvy:

• bílé pozadí
• Horní hranice
• Pravá hranice
• Velikost čtverce 450 x 450 pixelů

Poslední, co nám zbývá, je udělat v tomto bodě Jde o výměnu vrstev. Je nutné, aby plocha o rozměrech 450 x 450 pixelů byla níže než pravý a horní okraj. Vrstvy by měly být v tomto pořadí:

Odstraňte okraje z pozadí. Vytvořte opakující se pozadí

Proč jsme potřebovali rozřezat pozadí na tři části? Pokud posunete horní okraj úplně dolů a pravý okraj doleva a trochu s nimi ( s hranicemi) kouzlit, pak dostaneme přesně to, co vytvoříme v této lekci!! =)

1. Posuňme hranice a získáme následující výsledek:

1. Nyní musíme odstranit jeden z rohů z posunutého pravého okraje. Viz snímek obrazovky níže

Přesně pod tímto úhlem je nutné jej vyjmout. Je pro nás velmi důležité, aby se nedotýkala pravá strana posunuté pravé hranice

1. Nyní kouzlíme s gumou, abychom kresbu upravili ( ve stejnou dobu pravá strana posunutý pravý okraj nelze smazat)

1. Nyní potřebujeme sloučit posunutý pravý okraj a posunutý horní okraj.

1. Dále musíme odstranit horní a pravý roh našich již sloučených hranic. Pozor na obrazovku

1. Nyní potřebujeme ( znovu) upravte kresbu pomocí gumy. Takto vypadá můj obrázek:

Zde je pohled na hotovou hranici. Přemýšlejte tento typ bude pro vás užitečné, abyste přesně pochopili, jak stírat gumou.

Vezměte prosím na vědomí, že můžete pouze přepsat vnitřek . Nemůžeš se dotknout venku!

1. No, zbývá jen sloučit obrázek

Závěr

Nyní, když dlaždice s daty obrázek na pozadí stránce webu, pak neuvidíte hranice a bude velmi obtížné přesně pochopit, kde obrázek začíná a kde končí =)

Naděje tuto lekci Možná se vám bude hodit =) Pokud máte nějaké dotazy, použijte prosím níže uvedený formulář =)

Li tento blog Pokud vás to zaujalo, přihlaste se k odběru RSS kanálu blogu prostřednictvím čtečky nebo e-mailem.

Vše nejlepší! To je vše, co pro dnešek mám!

P.S.: Už jsem vám nejednou řekl o nádherném RPG, které mi změnilo celý život. Takže to vyšlo v roce 2002. Během ~9 let se Bethesda Softworks podařilo vydat další dvě části starověkých svitků. Poslední díl ( Skyrim) vyšlo v listopadu 2011. Pokud jste to ještě nehráli a nevíte, jestli to stojí za to, pak vám mohu doporučit navštívit sekci Skyrim na webu arbse.net. Přečtěte si, co je na něm uvedeno tento zdroj informace, pomůže vám to se rozhodnout =)

V tento den bych vám jich rád představil několik generátory zdarma bezešvé pozadí (vzory) pro váš web. Později v článku se budeme podrobněji zabývat jedním generátorem, nebudu se podrobně zabývat jinými, protože jsou v zásadě podobné.

Jak jste si již všimli, většina webů s , pozadím stránky je pruhované, a upřímně řečeno, vypadá to velmi cool, zvláště pokud pruhy šedá a malé.

S pomocí těchto generátorů můžete vyrobit úplně stejné vzory, řekl bych, že i lepší. K tomu nám navíc pomůže mnoho nastavení. Rád bych vám připomněl, že generátor, který nyní budeme uvažovat, vytváří pouze pruhovaná bezešvé pozadí.

Takže, začněme.

Budeme používat stránky www.stripegenerator.com.

Po přechodu na web se vám zobrazí několik nastavení. Není jich moc, ale na vytvoření cool pruhovaného to stačí bezešvé pozadí pro web.

Takto vypadá samotný generátor:

Jak vidíte, není to nic složitého a vše je logicky jasné. Ale přesto bych chtěl dát koncepty všem sekcím:

Funkce generátoru

• velikost pruhu— toto je šířka samotného pruhu, který je v tomto případě červený;
• vzdálenost— vzdálenost mezi červenými pruhy;
• barva(y) pruhu- barva pruhu. Jak vidíte, výchozí barva je červená, kterou lze změnit. A také přidejte několik dalších barev podle vašeho vkusu.
• styl pozadí— styl pozadí se vzorem. Na výběr jsou dva přechody.
• stín- skvělá funkce, která vám umožní upravit stín proužku. Tento parametr přidává vzoru hlasitost.
• barva(y) pozadí— pomocí této funkce můžete upravit barvu pozadí. Výchozí hodnota je bílá.
• orientace pruhů- styl a sklon proužku. Výběr není velký, ale stačí.

Chcete-li vidět příklad svého umění, musíte kliknout na samotný obrázek, který je vpravo, a aktualizuje se. Chcete-li stáhnout hotové bezešvé pozadí, musíte kliknout na tlačítko DOWNLOAD, které se nachází níže.

Jeden bod, který se mi opravdu líbil: pod samotným generátorem jsou hotové vzory od uživatelů, které lze snadno stáhnout. Musíte kliknout na pozadí, které se vám líbí, a uložit jej prostřednictvím prohlížeče.

To je v podstatě vše, co jsem chtěl o tomto generátoru říci. Vše je jednoduché a kvalitní.

No, teď vám představím několik dalších jednoduché generátory bezešvé pozadí. Jdeme.

Bezešvé pozadí generátory

www.tartanmaker.com

Není to špatné a jednoduché, které vytváří buněčné pozadí. Existuje také několik nastavení, která vám pomohou vytvořit vzor.

www.bgpatterns.com

Nádherný generátor vzorů. Existuje mnoho nastavení a také několik obrázků, které můžete použít. Chcete-li obrázek odstranit, průhlednost musí být nastavena na 0.

www.stripemania.com

Další skvělý generátor pruhované pozadí

bgmaker.ventdaval.com

Pozadí si nakreslíte sami a nejzajímavější je, že hned vidíte, jaký vzor jste nakreslili. Velmi cool nápad.

lab.rails2u.com

Generátor pruhovaného pozadí

To je vše drazí přátelé. Doufám, že s pomocí těchto stránek vytvoříte zázemí pro stránky, které potřebujete. Brzy se uvidíme.

V html není specifikováno pozadí pro stránky, je to napsáno pomocí CSS stylů, ale to je pouze teoretická formalita. Nyní pojďme zjistit, jak určit toto pozadí.

Pozadí pro webovou stránku nebo samostatný blok

Protože k dosažení tohoto cíle potřebujeme soubor css, musíme jej vytvořit a připojit k html. O tom se píše v. Poté můžete začít pracovat. Nejprve se musíte rozhodnout, na jaké pozadí chcete nastavit. Pokud je celá stránka jako celek, můžete to udělat takto:

Tělo (barva pozadí: bílá; )

To znamená, že se obracíme na značka těla, která představuje celou naši stránku. Chcete-li nastavit barvu pozadí, použijte vlastnost background-color. Ale co když potřebujete pozadí nastavit na vzor a ne na plnou barvu? Pak byste to měli napsat takto:

Body( background-image: url(cesta k obrázku. přípona obrázku) )

Pro přehlednost navrhuji podívat se na vše podrobněji pomocí příkladu. K tomu použiji tento obrázek:

Například obrázek na pozadí: url(comp.png) . V tomto příkladu jsme nastavili obrázek na pozadí nazvaný comp (tak jsem to nazval) formát png, který je ve stejné složce jako soubor css.
V html vytvořím vlastní blok s konkrétními rozměry pro demonstraci fungování CSS vlastností.

A zde jsou k tomu styly:

#ct( background-image: url(comp.png); width: 600px; height: 400px; )

Zde je to, co máme:

proč tomu tak je? Faktem je, že ve výchozím nastavení prohlížeč opakuje obrázek tolikrát, aby celý blok zaplnil. Někdy je to nutné, například při použití bezešvých vzorů, ale v našem případě by měl být jeden obrázek. Naštěstí se to dá zvládnout velmi snadno.

Opakujte pozadí

Pokud máte jako pozadí obrázek, tak se standardně bude opakovat vodorovně i svisle, aby vyplnil celý prostor stránky. Chcete-li to odstranit, použijte vlastnost background-repeat a její hodnotu no-repeat. Existují také následující hodnoty:

• Repeat-x – opakování pouze vodorovně
• Repeat-y – pouze vertikální

K vlastnostem našeho grafického pozadí přidáme:

Opakování na pozadí: bez opakování;

Pozice

Vlastnost background-position určuje umístění, kam bude obrázek umístěn. Jsou zde zadány dvě hodnoty – horizontálně a vertikálně. Příklady: background-position: right bottom – pozice v pravém dolním rohu, top-left – v dolním horním rohu (ve výchozím nastavení tak), 250px 500px – posunutí od levého horního rohu doprava o 250 pixelů a dolů o 500

Podívejme se lépe na příklady:

Pozice pozadí: vpravo nahoře;

Obrázek se přesune k pravému hornímu okraji. Kvádru jsem dal i žluté pozadí, aby byly vidět jeho okraje.

pozice pozadí: 50 % 50 %;

Obraz se jevil přesně uprostřed bloku. Ano, ano, i to je možné díky procentuálnímu záznamu polohy.

pozice pozadí: 70 % 20 %;

Pozadí je posunuto o 70 % horizontálně a 20 % vertikálně.

Je také povoleno specifikovat v pixelech záporná hodnota pozice. To lze provést například tehdy, když používáte velký obrázek sprite a potřebujete jej vložit do bloku pravá část tento skřítek.

Zamkněte pozadí

Také se mi moc líbí jedna vlastnost s názvem background-attachment . Má pouze dvě hodnoty a první je výchozí (rolování). To znamená, že při rolování stránky se bude rolovat i pozadí, a pokud použijete obrázek bez opakování, nakonec dojde a bude jen jednobarevný.

Aby se tomu zabránilo, je specifikováno pozadí-attachment: fixed a nyní je naše pozadí bezpečně upevněno na svém místě. To lze přirovnat k tomu, jak lze definovat blok pevné polohování a při rolování ze stránky nezmizí.

Zkrácená verze celé té dobroty

Probrali jsme mnoho vlastností, které vám umožňují vytvořit pozadí, ale pokud je všechny použijete, skončíte s těžkopádným záznamem. Existuje velmi elegantní řešení. Vlastnost background umožňuje napsat mezeru oddělenou požadovaná nastavení v tomto pořadí:
Pozadí: pozice opakování barevného obrázku;
A nyní lze vše napsat takto:

Pozadí: žlutá url(comp.png) bez opakování 20 % 100px;

Pokud nějakou vlastnost není potřeba definovat, pak se jednoduše vynechá (v našem případě jsme nepsali background-attachment).

Spousta pozadí

Co když potřebujete několik obrázků na pozadí? Stává se to, co můžete dělat? Dnes CSS tuto funkci podporuje. Zkusme to taky. Vezměme si tuto ikonu

Nazval jsem to laptop.

A zde je kód pro vložení multifonu:

Pozadí: url(comp.png) bez opakování 20% 100px, url(laptop.png) bez opakování 50% 50%; barva pozadí: žlutá;

Jak vidíte, stačí za první obrázek dát čárku a pro druhý zadat nastavení. Jednobarevná v tomto případě je lepší nastavit samostatně.

Stejným způsobem můžete zaznamenat více obrázků, kolik chcete, ale nepřehánějte to - příliš mnoho grafiky není příliš dobré.

Zde bych chtěl tento článek ukončit. S pozadím se dá dělat spousta dalších zajímavých věcí, pokusím se o nich v budoucnu napsat (a už jsem něco napsal - například).