Obrázek na pozadí css na střed. Pozadí v CSS (barva, pozice, obrázek, opakování, příloha) – vše pro nastavení barvy pozadí nebo obrázku na pozadí Html prvků. Klíčová slova pro horizontální polohování

Sady začáteční pozice nastavení obrázku pozadí pomocí vlastnosti background-image. Je přijatelné zadat více hodnot pro každé pozadí s uvedením hodnot oddělených čárkami.

stručné informace

Označení

	Popis	Příklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musí být na výstupu v uvedeném pořadí.	<размер> && <цвет>
A | B	Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B).	normální | malokapitálky
A || B	Každá hodnota může být použita samostatně nebo společně s jinými v libovolném pořadí.	šířka || počet
	Hodnoty skupin.	[ plodina || přejít ]
*	Opakujte nula nebo vícekrát.	[,<время>]*
+	Opakujte jednou nebo vícekrát.	<число>+
?	Zadaný typ, slovo nebo skupina je volitelná.	vložka?
(A, B)	Opakujte alespoň A, ale ne více než Bkrát.	<радиус>{1,4}
#	Opakujte jednou nebo vícekrát odděleně čárkami.	<время>#

×

Hodnoty

Vlastnost background-position má dvě hodnoty, horizontální pozici (může být left , center , right ) a vertikální pozici (může být top , center , bottom ). Kromě použití klíčových slov lze pozici zadat také v procentech, pixelech nebo jiných jednotkách. Pokud jsou použita klíčová slova, pak při psaní procent nezáleží na pořadí, ve kterém se zobrazují, nejprve se nastaví horizontální poloha obrázku a poté, oddělená mezerou, vertikální poloha; Vztah mezi použitými klíčovými slovy a procentuálním zápisem je následující.

• vlevo nahoře = vlevo nahoře = 0 % 0 % (v levém horním rohu)
• nahoře = nahoře uprostřed = uprostřed nahoře = 50 % 0 % (nahoře uprostřed)
• vpravo nahoře = vpravo nahoře = 100 % 0 % (pravý horní roh)
• vlevo = vlevo uprostřed = vlevo uprostřed = 0 % 50 % (vlevo a uprostřed)
• střed = střed střed = 50 % 50 % (uprostřed)
• vpravo = vpravo uprostřed = vpravo uprostřed = 100 % 50 % (vpravo a uprostřed)
• vlevo dole = vlevo dole = 0 % 100 % (v levém dolním rohu)
• dole = dole uprostřed = uprostřed dole = 50 % 100 % (dole uprostřed)
• vpravo dole = vpravo dole = 100 % 100 % (pravý dolní roh)

Závorky označují, kde je obrázek pozadí umístěn vzhledem ke kontejneru.

Pískoviště

div ( background-image: url(image/pic.png); background-repeat: no-repeat; background-position: left top; )

Příklad

Objektový model

Objekt.style.backgroundPosition

Specifikace

Každá specifikace prochází několika fázemi schvalování.

• Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
• Doporučení kandidáta ( Možné doporučení ) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
• Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
• Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
• Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
• Koncept ( Návrh specifikace) - první verze návrhu normy.

×

Vlastnost background-position umožňuje určit počáteční pozici obrázek na pozadí pro dvě osy najednou - X A y. Můžete však také použít samostatné vlastnosti pro každou osu - background-position-x a background-position-y .

hodnoty pozadí

Hodnoty mohou být buď speciální klíčová slova, nebo číselné hodnoty v jednotkách Rozměry CSS- procenta, pixely atd.

Klíčová slova pro horizontální polohování

• vlevo - obrázek na pozadí je přilepený k levé straně prvku;
• střed - obrázek na pozadí je umístěn ve středu osy x;
• vpravo - obrázek na pozadí se přilepí na pravou stranu prvku.

div (pozice-pozadi-x: vlevo; )

Klíčová slova pro vertikální polohování

• top - obrázek na pozadí je přilepen k horní straně prvku;
• střed - obrázek na pozadí je umístěn ve středu osy y;
• dole - obrázek na pozadí se přilepí na spodní stranu prvku.

div ( background-position-y: bottom; )

Zkratka pro dvě osy

Pozice pozadí je často specifikována pro dvě osy najednou. K tomu je vhodné použít zkrácený zápis, tedy vlastnost background-position. Má jednu nebo dvě hodnoty (pro umístění podél dvou os najednou nebo podél každé zvlášť).

Níže - různé příklady umístění na pozadí pomocí klíčových slov:

Pozice pozadí: nahoře uprostřed; /* pozadí nahoře uprostřed */ background-position: top right; /* pozadí v pravém horním rohu */ background-position: bottom left; /* pozadí v levém dolním rohu */ background-position: center right; /* pozadí vpravo uprostřed */

Hodnoty lze zaměnit - budou fungovat stejně.

Příklady zarovnání pozadí pomocí pozice pozadí

Pokud nastavíte opakování pozadí pomocí vlastnosti background-repeat, pak poloha pozadí určí, v jakém bodě bude obraz duplikován.

Chcete-li umístit pozadí, můžete použít jednu hodnotu pro dvě osy najednou:

Pozice pozadí: střed; /* pozadí na střed */ background-position: left; /* pozadí vlevo uprostřed */ background-position: right; /* pozadí vpravo uprostřed */ background-position: top; /* pozadí nahoře uprostřed */ background-position: bottom; /* pozadí dole uprostřed */

Přesné hodnoty v jednotkách CSS

Vzdálenost pozadí od levého a horního okraje prvku můžete ovládat pomocí přesných hodnot specifikovaných v jednotkách CSS (jako jsou pixely nebo ems). Příklad:

Div (pozice na pozadí: 10px 25px; )

Tento zápis znamená, že pozadí je 10 pixelů od levého okraje a 25 pixelů od horního okraje. Zde je důležité pořadí, ve kterém jsou hodnoty zapsány: první hodnota je zodpovědná za horizontální polohu obrázku na pozadí, druhá - svisle. Přijatelné a záporné hodnoty(například mohou být užitečné, pokud jsou na levé nebo horní straně obrázek na pozadí existuje oblast, kterou je třeba skrýt).

Vzdálenost pozadí můžete upravit od pravé nebo spodní strany prvku pomocí speciální hodnoty, která je zapsána takto:

Div (pozice na pozadí: vpravo 15 pixelů dole 40 pixelů; )

Zde klíčová slova vpravo a dole sdělují prohlížeči, že chcete počítat zprava a zespodu. Po každém z klíčových slov je napsán požadovaný význam. Takže 15px je vzdálenost mezi pozadím a pravá strana prvek a 40px je vzdálenost mezi pozadím a spodní stranou prvku.

Procentuální hodnoty

Velké pohodlí poskytuje možnost zaznamenávat hodnoty v procentech. Vzdálenost se vypočítá na základě rozměrů prvku s dané pozadí. Záporná procenta jsou přijatelná, ale výsledky mohou být neočekávané.

Nejlepší způsob, jak pochopit, jak se pozadí pohybuje pod procentuální kontrolou, je cvičit. Prozatím si ukažme několik příkladů umístění na pozadí pomocí procent:

Poznámka: hodnota 50 % dokonale vycentruje obrázek na pozadí (vertikálně i horizontálně), protože středový bod je nastaven uprostřed pozadí, nikoli na začátku nebo konci.

Kombinování hodnot

Ano, můžete si zapsat svou hodnotu pro každou z os v požadovaných měrných jednotkách (nebo pomocí klíčového slova). Kombajn přesné hodnoty s relativními, klíčová slova s ​​hodnotami v měrných jednotkách - absolutní svoboda akce. Příklady:

Důležité: obrázky na pozadí a tisk

Obrázky na pozadí se při tisku stránky obvykle nezobrazují. Mějte to na paměti při práci s důležitou grafikou – jako je logo společnosti, pokyny a další ilustrace obsahující důležitá informace, doporučuje se přidat přes tag .

Podpora prohlížeče

Záznam pozice na pozadí se dvěma parametry je podporován všemi používanými prohlížeči.

Záznam se čtyřmi parametry pro počítání z pravé a spodní strany funguje pouze v IE9+, Firefox 13+, Chrome 25+, Safari 7+.

Vlastnosti background-position-x a background-position-y nejsou podporovány Prohlížeč Firefox do 48. verze a také nejsou vnímány mobilní prohlížeče Opera Mini A Opera Mobile až do verze 12.1.

Pro více informací se vždy můžete podívat na Caniuse.com.

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íváme na to, 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 jako pozadí použít obrázek (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 další čtyři pravidla CSS se budou týkat pouze obrázku na pozadí, který lze nastavit pro libovolný 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 tohle 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 pro pravidlo výchozí pozici 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í použitím 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 na střed výřezu, nikoli na střed 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 tam ještě nějaké 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í podivný žlutá barva 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 u některého prvku chcete nastavit pouze barevnou výplň, a s obrázek na pozadí neobtěžujte se, můžete místo toho udělat toto:

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.

Hodně štěstí! 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