Výplň pozadí CSS. Barva textu a barva pozadí v CSS. Průsvitné pozadí pomocí css
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í.
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ě toho, 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? různé 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 ( . ) název 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;
- ne-opakovat- 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ě ( opraveno).
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 používá se 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í:
- nahoře- 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- 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;
- právo- 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
}
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 ve formátu RGB (Red Green Blue). 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í obrázku. 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.