Barva pozadí div. Pozadí v CSS (barva, pozice, obrázek, opakování, příloha) – vše pro nastavení barvy pozadí nebo obrázku na pozadí Html prvků. Ovládání velikosti obrázku na pozadí
S pomocí CSS barva a pozadí Můžete jej přiřadit téměř ke každému prvku webové stránky, libovolně ovládat obrázek na pozadí a jeho opakování horizontálně i vertikálně. Kromě, pomocí CSS Obrázek na pozadí můžete umístit kamkoli na obrazovku pomocí umístění. Nepředbíhejme zatím moc, pojďme popořadě.
Vlastnost COLOR
Tato vlastnost určuje barvu prvku, přesněji barvu textu uvnitř prvku. Hodnota je uvedena v jedné z možných forem:
- název barvy (ZELENÁ, ČERNÁ, ČERVENÁ...);
- hexadecimální kód barvy (008000, 000000, FF0000...);
- desetinný barevný kód v RGB (color:rgb (40, 175, 250));
Vlastnost COLOR se dědí, a pokud ne nastavená hodnota Pro jakýkoli prvek je hodnota zděděna od svého předka. Může se ale stát, že není nastaven ani pro předka - pak se použije šablona stylů prohlížeče s výchozími hodnotami. Barva prvku v tomto případě bude s největší pravděpodobností černá.
Jak jsem již zmínil, můžete nastavit barvu téměř všem prvkům, mohou to být (H1... H6), (silné, em) a dokonce i celá čísla (p) a dokonce i ohraničení tabulek, ale o tom později.
Podívejme se na příklad nastavení barvy textu pomocí CSS:
h1 (barva: modrá)
V tomto příkladu budou všechna záhlaví první úrovně webové stránky modrá:
silný (barva: červená)
V tomto případě bude tagem zvýrazněno vše, co je v textu stránky silný, zčervená.
Můžete to napsat takto:
h1, p, silné (barva: zelená)
Pak budou nadpisy první úrovně, všechny odstavce a vše, co je zvýrazněno tagem, zelené.
Kdy je nutné zvýraznit nadpisy? rozdílné barvy, pak se použijí selektory tříd. K definování třídy v HTML se používá atribut třída, který lze aplikovat na libovolné prvky. V HTML kódu budete muset napsat:
class="Blue" > Barva záhlaví této třídy bude modrá
V šabloně stylů CSS v tomto případě napíšeme pravidlo, kde selektorem bude prvek H1 a přes tečku ( . ) jméno třídy:
h1.Blue (barva: modrá)
V dokumentech HTML se také používají selektory podle identifikátoru, jsou určeny atributem id. Identifikátor je důležitější nebo prioritní atribut než třída. A pokud je pro prvek v kódu HTML zadána třída i identifikátor, použije se styl identifikátoru. Identifikátor je označen znakem hash ( # ). Chcete-li použít identifikátor v kódu HTML, budete muset napsat:
id="Modrá" > Barva záhlaví tohoto ID bude modrá
V šabloně stylů postupně:
h1#Blue (barva: modrá)
Vlastnost BACKGROUND-COLOR
Tato vlastnost vám umožňuje nastavit barvu pozadí pro stránku jako celek, odstavec, odkaz nebo obecně pro jakýkoli prvek HTML. Chcete-li to provést, hodnota vlastnosti určuje barvu nebo hodnotu průhledný(průhledný). Kód pro pozadí stránky je napsán:
tělo (barva pozadí: aqua)
V tomto případě bude pozadí stránky tyrkysová barva, a abychom dali pozadí názvu, píšeme:
h1 (barva pozadí: žlutá)
Získáme žluté pozadí pro nadpisy první úrovně.
Barva a pozadí v CSS
Vlastnost BACKGROUND-REPEAT
Tato vlastnost se používá při nastavení k určení, zda se bude opakovat vodorovně a svisle. Platné hodnoty:
- opakovat- obraz se opakuje svisle a vodorovně;
- opakovat-x- obraz se opakuje pouze vodorovně;
- opakovat-y- obraz se opakuje pouze svisle;
- neopakovat- obraz se neopakuje.
Kód je napsán takto:
p(
obrázek na pozadí: url( adresa souboru obrázku)
;
background-repeat : repeat-x
}
Text tohoto odstavce se zobrazí nahoře obrázek na pozadí, který bude umístěn vodorovně.
Vlastnost BACKGROUND-ATTACHMENT
Tato vlastnost se používá k označení prohlížeče, zda se má obrázek na pozadí stránky posouvat s textem ( svitek) nebo zůstat nehybně ( pevný).
tělo(
obrázek na pozadí: url( adresa souboru obrázku)
;
background-repeat : repeat-x ;
příloha na pozadí: pevná
}
V tomto případě zůstane obrázek na pozadí nehybný.
Vlastnost BACKGROUND-POSITION
Tato vlastnost se používá k umístění obrázku vzhledem k . Hodnoty jsou uvedeny v procentech (%), v jednotkách délky (cm, px), s klíčovými slovy:
- Vertikálně:
- horní- horní část obrázku je zarovnána k hornímu okraji stránky nebo bloku;
- centrum
- dno- spodní část obrázku je zarovnána k spodní okraj stránku nebo blok.
- Horizontálně:
- vlevo, odjet- levý okraj obrázku je zarovnán k levému okraji stránky nebo bloku;
- centrum- střed obrázku je zarovnán na střed stránky nebo bloku;
- že jo- pravý okraj obrázku je zarovnán k pravému okraji stránky nebo bloku.
Příklad kódu píšeme v procentech, jednotkách délky a klíčových slovech:
tělo(
obrázek na pozadí: url( adresa souboru obrázku)
;
pozice na pozadí: 0% 0%
}
Tělo (
obrázek na pozadí: url( adresa souboru obrázku)
;
pozadí: 10px 25cm
}
Tělo (
obrázek na pozadí: url( adresa souboru obrázku)
;
background-position: nahoře uprostřed
}
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 hypertextovém značkovacím jazyce. 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 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í od levého horního rohu oblasti 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 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í 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 to je přesně aplikace, kterou vlastnost CSS background-attachment najde v moderním blokovém rozložení.
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 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.
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í vzhledu seznamů v HTML kód
Jak nakonfigurovat střídající se barvu pozadí řádků tabulek, seznamů a dalších prvků Html na webu pomocí pseudotřídy nth-child 
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. inherit Zdědí hodnotu rodiče.HTML5 CSS2.1 IE Cr Op Sa Fx
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í.
Verze aplikace Internet Explorer do 7.0 včetně nepodporují dědičnou hodnotu.
Pokud je pozadí nastaveno pro řádek tabulky (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 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
Myslím, že neexistuje jediný web, kde by nemovitost nebyla využívána CSS pozadí
. Zdá se, že co může být jednoduššího než tato vlastnost? Ale ne, jeho možnosti jsou mnohem širší běžné použití obrázky nebo barvy jako pozadí stránky. Některé věci budou známé, jiné budou pravděpodobně pro mnohé nové. V každém případě se bude hodit důkladně vědět, jak pozadí funguje.
CSS3 přineslo do vlastnosti spoustu nových věcí, jako je průhlednost a přiřazení několika obrázků jako pozadí, ale o tom si povíme níže, ale nejprve se podíváme na základy vlastnosti Pozadí.
barva pozadí
Jsem si více než jistý, že jste již přiřadili barvu pozadí více než jednou. To lze provést pomocí několika typů zápisu: normální (používá se název barvy), hexadecimální nebo RGB zápis. Každý typ je ekvivalentní, použijte ten, který se vám nejvíce líbí. Snažím se používat nejkratší možnost a pro snazší vnímání je výsledný soubor stylu o něco menší.
P (barva pozadí: červená;) p (barva pozadí: #f00;) p (barva pozadí: #ff0000;) p (barva pozadí: rgb(255, 0, 0;))
CSS3 podporuje průhlednost, takže ji můžeme přidat do naší barvy, například takto:
P (barva pozadí: rgba(255, 0, 0, 0,5);)
Poslední údaj nastavil průhlednost na 50 %. Hodnotu průhlednosti můžete nastavit od 0 (plná průhledné pozadí) až 1 (plně neprůhledné).
obrázek na pozadí
Tato vlastnost se také používá velmi často a umožňuje přiřadit obrázek pozadí. CSS3 přidalo možnost přiřadit pozadí více obrázků, z nichž každý vytváří svou vlastní vrstvu, takže každý následující překrývá tu předchozí. Proč by to mohlo být užitečné? Všechno je docela jednoduché - řekněme, že musíte do každého rohu webu našroubovat malé ozdoby. Poskytováno více či méně gumové rozložení použití jednoho obrázku není možné. Proto uděláme 4 „vrstvy“, každý obrázek přesuneme do vlastního rohu a to je vše, problém je vyřešen
Text (obrázek na pozadí: url("obrázek1"), url("obrázek2"), url("obrázek3"))
Pokud potřebujete přiřadit jeden obrázek k pozadí, necháme v kódu pouze první, myslím, že je to pochopitelné.
Při použití jakýchkoli obrázků jako pozadí byste si měli pamatovat dvě pravidla:
- soubor kontrastní barva pozadí v případě, že uživatel obrázek z nějakého důvodu nevidí. Může jednoduše vypnout zobrazování obrázků a šetřit provoz.
- nepoužívejte k přenosu žádný obrázek na pozadí důležitá informace. Z výše uvedených důvodů jej uživatel nemusí vidět.
Podpora více obrázků na pozadí je poměrně rozsáhlá. Všechny prohlížeče, dokonce i IE8, tuto vlastnost podporují.
Od autora: Ahoj všichni. Barvy pozadí a obrázky hrají ve webovém designu obrovskou roli, protože vám umožňují navrhnout jakékoli prvky atraktivněji. Dnes se podíváme na to, jak udělat pozadí v HTML.
Je možné použít HTML pro nastavení pozadí?
Hned řeknu, že ne. Obecně platí, že html nebylo vytvořeno pro návrh webových stránek. Je to prostě velmi nepohodlné. Například existuje atribut bgcolor, pomocí kterého můžete nastavit barvu pozadí, ale to je velmi nepohodlné.
Podle toho použijeme kaskádové tabulky styly (css). Je toho hodně více možností pro nastavení pozadí. Dnes se podíváme na ty nejzákladnější.
Jak nastavit pozadí pomocí css?
Nejprve se tedy musíte rozhodnout, kterému prvku chcete pozadí nastavit. To znamená, že musíme najít selektor, do kterého budeme psát pravidlo. Pokud například potřebujete nastavit pozadí pro celou stránku jako celek, můžete to udělat pomocí selektoru těla a pro všechny bloky pomocí selektoru div. No atd. Pozadí může a mělo by být propojeno s jakýmikoli dalšími selektory: stylové třídy, identifikátory atd.
Poté, co se rozhodnete pro selektor, musíte napsat název samotné nemovitosti. Chcete-li nastavit barvu pozadí (tj jednobarevná, nikoli přechod nebo obrázek) je použita vlastnost background-color. Za ním je třeba dát dvojtečku a napsat samotnou barvu. To lze provést různými způsoby. Například pomocí klíčových slov, hexadecimálního kódu, rgb formáty, rgba, hsl. Žádný metoda bude fungovat.
Nejčastěji používanou metodou je hexadecimální kód. K výběru barev můžete použít program, který zobrazí kód barvy. Například photoshop, malování nebo nějaký online nástroj. Podle toho jako příklad napíšu obecné pozadí pro celou webovou stránku.
tělo (barva pozadí: #D4E6B3; )
Tento kód je třeba vložit do hlavová sekce. Je důležité, aby byly soubory ve stejné složce.
Obrázek jako pozadí
Jako obrázek použiji malou ikonku. html jazyk:
Vytvořme prázdný blok s identifikátorem:
< div id = "bg" > < / div > |
Dejme tomu explicitní rozměry a pozadí:
#bg( šířka: 400px; výška: 250px; obrázek na pozadí: url(html.png); )
#bg( šířka: 400px; výška: 250px; obrázek na pozadí : url (html . png ) ; |
Z tohoto kódu můžete vidět, že jsem použil novou vlastnost - background-image. Je určen speciálně pro vložení obrázku jako pozadí do html prvku. Uvidíme, co se stane:
Chcete-li zadat obrázek, musíte napsat za dvojtečku klíčové slovo url a poté v závorkách uveďte cestu k souboru. V tomto případě je cesta určena na základě skutečnosti, že obrázek je ve stejné složce jako html dokument. Musíte také určit formát obrázku.
Pokud jste to udělali a pozadí se v bloku stále nezobrazuje, zkontrolujte znovu, zda jste správně napsali název obrázku, zda je správně nastavena cesta a přípona. Těch je nejvíc běžné důvodyže se pozadí prostě nezobrazí, protože prohlížeč nemůže obrázek najít.
Ale všimli jste si jedné věci? Prohlížeč vzal a znásobil obrázek v celém bloku. Takže, abyste věděli, toto je výchozí chování obrázků na pozadí – opakují se svisle i vodorovně, dokud se vejdou do bloku. Tímto chováním můžete snadno ovládat. K tomu použijte vlastnost background-repeat, která má 4 hlavní hodnoty:
Repeat – výchozí hodnota, obraz se opakuje na obě strany;
Repeat-x – opakuje se pouze na ose x;
Repeat-y – opakuje se pouze podél osy y;
No-repeat – neopakuje se vůbec;
Můžete napsat každou hodnotu a uvidíte, co se stane. Napíšu to takto:
background-repeat: repeat-x;
pozadí - opakovat : opakovat - x ; |
Nyní opakujte pouze vodorovně. Pokud nastavíte neopakování, bude pouze jeden obrázek.
Skvělé, teď to můžeme dokončit, protože tohle základní schopnosti pracovat s pozadím, ale ukážu vám další 2 vlastnosti, které vám umožní získat větší kontrolu.
Prostřednictvím opakování byli návrháři rozvržení schopni vytvořit textury pozadí a přechody pomocí jednoho malého obrázku. Může to být 30 x 10 pixelů nebo dokonce menší. Nebo možná trochu víc. Obraz byl takový, že když se to opakovalo na jednu nebo dokonce na obě strany, nebyly vidět žádné přechody, takže výsledkem bylo jediné bezproblémové pozadí. Mimochodem, tento přístup by měl být použit nyní, pokud chcete použít bezešvá textura na vašem webu jako pozadí. Dnes již lze gradient implementovat pomocí metod css3, o tom si určitě povíme později.
Pozice pozadí
Ve výchozím nastavení bude obrázek na pozadí, pokud není nastaven na opakování, vlevo horní roh váš blok. Pozici lze ale snadno změnit pomocí vlastnosti background-position.
Můžete to nastavit různými způsoby. Jednou z možností je jednoduše označit strany, na kterých by měl být obrázek umístěn:
pozadí-pozice: vpravo nahoře;
pozadí - pozice : vpravo nahoře ; |
To znamená, že vertikálně zůstává vše stejné: obrázek na pozadí je umístěn nahoře, ale vodorovně jsme změnili stranu vpravo, tedy vpravo. Dalším způsobem, jak nastavit pozici, je procento. V tomto případě začíná odpočítávání v každém případě od levého horního rohu. 100 % - celý blok. Abychom tedy umístili obrázek přesně do středu, zapíšeme jej takto:
pozice pozadí: 50 % 50 %;
pozice pozadí: 50 % 50 %; |
Pamatujte na jednu důležitou věc ohledně polohování – prvním parametrem je vždy horizontální poloha a druhým je vertikální poloha. Pokud tedy uvidíte hodnotu 80% 20%, můžete okamžitě dojít k závěru, že obrázek na pozadí se posune hodně doprava, ale moc se nezmenší.
A nakonec můžete určit polohu v pixelech. Vše je při starém, jen místo % bude px. V některých případech může být takové umístění nezbytné.
Těsnopisný zápis
Souhlaste s tím, že kód se ukáže být docela těžkopádný, pokud je vše nastaveno tak, jak jsme to udělali. Ukazuje se, že je třeba specifikovat cestu k obrázku, opakování a pozici. Opakování a pozice samozřejmě nejsou vždy nutné, ale v každém případě by bylo správnější použít pro vlastnost zkrácený zápis. Vypadá to takto:
pozadí: #333 url(bg.jpg) bez opakování 50 % 50 %;
Pozadí: #333 url(bg.jpg) bez opakování 50 % 50 %; |
To znamená, že prvním krokem je v případě potřeby zaznamenat celkovou plnou barvu pozadí. Pak cesta k obrázku, opakování a pozice. Pokud některý parametr není potřeba, jednoduše jej vynechejte. Souhlasíte, je to mnohem rychlejší a pohodlnější a také výrazně redukujeme náš kód. Obecně radím, abyste vždy psali ve zkrácené formě, i když potřebujete uvést pouze barvu nebo obrázek.
Ovládání velikosti obrázku na pozadí
Náš současný obrázek není příliš dobrý pro předvedení dalšího triku, takže vezmu jiný. Nechť je to velikost bloku nebo větší. Představte si tedy, že stojíte před úkolem vytvořit obrázek na pozadí tak, aby zcela nevyplňoval svůj blok. A například obrázek je ještě větší než velikost bloku.
Co můžete v tomto případě dělat? Samozřejmě, že nejjednodušší a nejrozumnější možností by bylo jednoduše zmenšit obrázek, ale ne vždy je to možné. Řekněme, že leží na serveru a uvnitř tento moment není čas ani příležitost to snížit. Problém lze vyřešit pomocí vlastnosti background-size, kterou lze nazvat relativně novou a která umožňuje manipulovat s velikostí obrázku na pozadí a vlastně jakéhokoli pozadí.
Takže můj obrázek nyní zabírá veškerý prostor v bloku, ale dám mu velikost pozadí:
velikost pozadí: 80 % 50 %;
velikost pozadí: 80 % 50 %; |
Opět platí, že první parametr nastavuje horizontální velikost, druhý - vertikální velikost. Vidíme, že vše bylo aplikováno správně - fotografie se stala 80% šířky bloku na šířku a polovinu na výšku. Zde si stačí jen upřesnit – nastavením velikosti v procentech můžete ovlivnit proporce obrázku. Takže buďte opatrní, pokud nechcete narušit proporce.
Jak můžete hádat, velikost pozadí může být také specifikována v pixelech. Jsou ještě dva klíčová slova-významy, který lze také použít:
Obálka – obrázek bude zmenšen tak, aby alespoň na jedné straně zcela vyplnil blok.
Obsah – změní měřítko tak, aby se obrázek ve své maximální velikosti zcela vešel do bloku.
Výhodou těchto hodnot je, že nemění proporce obrázku, takže je ponechávají stejné.
Měli byste také pochopit, že roztažení obrazu může vést ke zhoršení jeho kvality. Mohu uvést příklad ze života a skutečná praxe návrháři rozložení. Každý ví a chápe, že při navrhování pro stolní počítače je třeba přizpůsobit web šířkám hlavního monitoru: 1280, 1366, 1920. Pokud vezmete obrázek na pozadí o velikosti řekněme 1280 x 200 a nedáte to velikost pozadí, pak obrazovky s větší šířkou Objeví se prázdné místo, obrázek nevyplní celou šířku.
V 99 % případů to webovi vývojáři nevyhovuje, a tak nastaví background-size: cover tak, aby se obrázek vždy roztáhl na maximální šířku okna. Tento dobré přivítání, který by měl být použit, ale nyní budete čelit problému, že uživatelé s šířkou obrazovky 1920 pixelů mohou vidět suboptimální kvalitu obrazu.
Připomínám, že se roztáhne do maximální šířky. V souladu s tím se kvalita automaticky zhorší. Pouze správné rozhodnutí zde nejprve použije obrázek větší velikost– šířka 1920 pixelů. Pak na samém širokoúhlé obrazovky bude ve své přirozené velikosti a na jiných bude prostě postupně ořezán, ale zároveň se správným výběrem obrázku na pozadí na vzhled Toto nebude mít vliv na web.
Obecně je toto pouze 1 příklad toho, jak využít znalosti získané v tomto článku při sestavování skutečných rozvržení.
Průsvitné pozadí pomocí css
Další funkce, kterou lze implementovat pomocí pomocí css – průsvitné pozadí. To znamená, že prostřednictvím tohoto pozadí bude možné vidět, co je za tím.
Jako příklad nastavím celou stránku jako pozadí obrázku, který jsme použili dříve v příkladech. Pro blok s identifikátorem bg, na kterém provádíme všechny naše experimenty, nastavíme pozadí pomocí formátu úlohy rgba barvy.
Jak jsem řekl dříve, existuje mnoho formátů pro nastavení barev v CSS. Jedním z nich je rgb, stačí známý formát těm, kteří pracují grafické editory. Píše se takto: rgb(17, 255, 34);
První hodnota v závorce je sytost červené, pak zelené a pak modré. Hodnota může být číselná od 0 do 255. formát rgba se neliší, pouze je přidán další parametr - alfa kanál. Hodnota může být od 0 do 1, kde 0 je úplná průhlednost.
