Nastavení barvy a pozadí pomocí css. Background-repeat - opakování obrázku na pozadí
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 nastavit HTML barva pomocí prvků 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í:
- 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í označujícího cestu ke grafickému souboru, bude tento 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 bylo 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 hodnota "0% 0%" je výchozí hodnotou pro pravidlo pozice na pozadí.
No, kdy je toto pravidlo v platnosti 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í přes pozici 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 to je přesně aplikace, kterou vlastnost CSS background-attachment najde v moderním rozložení bloků.
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
Stručné informace
CSS verze
Hodnoty
url Hodnota je cesta k grafický soubor, který je specifikován uvnitř konstrukce url(). Cesta k souboru může být napsána buď v uvozovkách (dvojité nebo jednoduché), nebo bez nich.none Deaktivuje obrázek na pozadí prvku.
HTML5 CSS2.1 IE Cr Op Sa Fx
obrázek na pozadí
Objektový model
document.getElementById("elementID ").style.backgroundImage Prohlížeče
Internet Explorer
až do verze 7.0 včetně použije pozadí na vnitřní hranici prvku, který má nastavenou vlastnost hasLayout. Pokud prvek nemá hasLayout , vlastnost background-image bude respektovat hranice prvku, jak je uvedeno ve specifikaci. Rozdíl v zobrazení bude patrný, pokud jsou okraje čárkované nebo tečkované, nikoli plné.
Pokud je prvek nastaven na rolování nebo auto , bude mít Internet Explorer 8 vertikální zpoždění o jeden pixel při rolování pozadí.
none Deaktivuje obrázek na pozadí prvku.
| 1 | 2 | 3 |
Výsledek tento příklad PROTI Prohlížeč Chrome znázorněno na Obr. 1. Internetový prohlížeč Průzkumník, Opera a Firefox správně zobrazují pozadí pro linku (obr. 2).
Rýže. 1. Opakujte pozadí pro každou buňku
Rýže. 2. Pozadí pro celý řádek
Jeden z nejčastějších úkolů při úpravě textu a bloků v HTML a CSS. S tímto problémem se může setkat nejen návrhář layoutu, ale také každý správce obsahu, který upravuje obsah webu. K vyřešení tohoto problému se používají pouze dvě vlastnosti: barva - barva textu, pozadí - práce s pozadím, barva nebo obrázek.
Práce s testovací barvou v CSS
barva je vlastnost, která je potřebná k určení barvy pouze pro text. Barva může být specifikována jako v HTML formát HEX kód, tedy dovnitř RGB formát(Červená Zelená Modrá). Barevné kódy lze vybrat buď v grafické programy, například Photoshop nebo onlineSyntaxe vlastnosti:
Barva: Barva;
Nyní použijeme vlastnost:
Obsah (
barva: #444; // tmavě šedý text v prvku s třídou obsahu
}
Proč právě tento příklad: určení barvy pro odkaz a pro text jsou různé věci. Pamatujte si. No já osobně doporučuji udělat text a odkazy různé barvy.
Práce s pozadím v CSS
pozadí je vlastnost, která umožňuje pracovat s pozadím obrázku: nastavit barvu pozadí, nastavit obrázek jako pozadí ( jpg formáty, gif, png), změňte pozici pozadí a další parametry, které jsou popsány níže.barva pozadí- Tato vlastnost se používá pouze k nastavení barvy pozadí. Přijímá pouze kód barvy. Barvu lze zadat ve formátu RGB (Red Green Blue) nebo ve formátu HTML HEX kódu.
Blokovat (
barva pozadí: #fbb5b5; // nastaví barvu pozadí na pastelově šarlatovou
}
Nejlepší příklady barev pro pozadí (modely moderního designu: Flat Design atd.):
obrázek na pozadí je vlastnost, která se používá k nastavení nějakého obrázku jako pozadí v prvku. Pro označení obrázku to stačí parametr url a cestu k obrázku vzhledem k souboru se styly css.
#zpět (
background-image: url("images/fon.jpg");
}
pozadí-opakování- lze použít pouze v případě, že vlastnost background-image byla specifikována výše. Tato vlastnost nastavuje pravidlo opakování obrazu. Ve výchozím nastavení se obrázek opakuje podél osy X a podél osy Y až k hranicím prvku (pokud je pozadí menší než prvek). Ve vlastnosti lze určit nastavení, aby se obrázek opakoval pouze podél osy X - repeat-x (vodorovně), pouze podél Y - repeat-y (vertikálně) nebo se neopakoval vůbec - bez opakování.
#obsah (
background-repeat: repeat-x; /* obrázek se bude opakovat pouze vodorovně až po hranice bloku */
}
pozadí-příloha- zafixuje pozadí v jedné poloze, to znamená, že obrázek se bude posouvat spolu s obsahem bloku nebo zůstane pevný. Výchozí hodnota je scroll, která nefixuje pozici pozadí.
#obsah (
background-image: url("background.jpg");
background-repeat: repeat-x; /* obrázek se bude opakovat pouze vodorovně */
pozadí-příloha: pevná; /* připnuto k umístění */
}
pozadí-pozice- vlastnost, která určuje umístění pozadí v prvku. Jsou zadány dvě hodnoty: horizontální poloha a poté vertikální poloha. Zadává se buď digitálně (pixely a procenta) nebo abecedně (vlevo, uprostřed, vpravo, nahoře, dole). Tato vlastnost je potřebná, když se obrázek neopakuje (no-repeat) a pozadí musí být v prvku umístěno určitým způsobem.
#blok (
pozadí-pozice: levý střed; /* vodorovně - na levé straně, svisle - uprostřed */
}
Myslím, že v komentáři je vše jasné)
Příklad zápisu digitální hodnoty:
#klíče (
background-position: 109px 57px; /* levý okraj 109px, horní 57px */
}
I zde si myslím, že by mělo být vše jasné.
Mnoho nemovitostí? Podívejme se, jak psát zkráceně.
Nakonec. Zkratka pro pozadí v CSS
Můžete použít zkrácený zápis, kde budou všechny parametry uvedeny v řádku:Pozadí: barva opakování obrazu poloha připevnění;
O výhodách. Tento typ záznamu zkracuje dobu načítání stránky a vykreslování prohlížeče. Smilujte se nad svými návštěvníky, je lepší psát tímto způsobem, pokud samozřejmě nepotřebujete několik nemovitostí.
Ano, můžete přeskočit jakoukoli vlastnost, pokud ji nepotřebujete! Pokračujte v zadávání hodnot dále v seznamu.
Blokovat (
pozadí: #f1f1f1 url("background.jpg") repeat-x posouvat 100px 125px;
}
Příklad toho, jak fungují pozadí v CSS
Příklad kódu. Na výsledek práce a zdrojový kód se můžete podívat na odkazu níže.