Poloprůhledné css pozadí. Vytvořte průhledné pozadí v HTML a CSS (neprůhlednost a efekty RGBA)

Dnes chci mluvit o průhledném pozadí bloku textu, jak ho vyrobit a co pro to nabízí CSS3. Než přejdeme k rgba a hsla, podívejme se na příklady použití průsvitného pozadí pro blok s textem, respektive jak se toho dosahuje a jaké problémy vznikají. Pro demonstraci použijeme tento obrázek, zpracovaný nějakým java programem, a odkaz na který se bohužel již dávno ztratil.

Podíváme se na obrázek níže. Existuje grafické pozadí, na které chcete překrýt průsvitný blok textem. V ideálním případě by mělo být to, co je na obrázku pod číslem 2, ale někdy může nastat to, co je pod číslem 3. Je tu ještě jedna vada, ale níže ji slovně zmíním, protože nedalo se z toho udělat screenshot.

Průsvitné pozadí bez rgba a hsla

1. Průsvitný PNG ... Nejlepší varianta, protože je to zdaleka nejvíce cross-prohlížeč a nejjednodušší. Aby byl blok průhledný, je potřeba jednopixelový průsvitný PNG, který je určen jako pozadí bloku. A to je vše.
   
   nevýhody: Je vyžadován pouze jeden.
2. Transparentnost díky neprůhlednosti ... Průhlednost bloku se v různých prohlížečích nastavuje takto:

   krytí: 0,5;
   filtr: alfa (opacita = 50);
   -moz-opacity: 0,5;

   kde 0,5 a 50 jsou 50% průhlednost. Ale je tu problém. Pokud nastavíme požadovaný blok na takovou průsvitnost, pak na obrázku výše uvidíme tu třetí možnost - obsah bloku se také stane průsvitným. Existuje však východisko - volné polohování, pomocí kterého je pod blok textu umístěn další blok, na který je nastavena průsvitnost.

   Podívejme se na příklad. Blok s oranžovým obrázkem nechť je tag body, kontejner obsahující text i průhledné pozadí - #block_bg, uvnitř kterého je blok s průsvitným pozadím #block_transparent a blok s textem je #block_text.

   
   

   
   

   Textový textový text, mnoho, mnoho textu

   
   

   body (background: url (image.jpg);)
   #block_bg (
   poloha: relativní;
   přepad: skrytý;
   šířka: 400px;
   čalounění: 10px;
   }
   #block_text (pozice: relativní; z-index: 100;)
   #block_transparent (
   krytí: 0,5;
   filtr: alfa (neprůhlednost = 50);
   -moz-opacita: 0,5;
   pozadí: #fff;
   pozice: absolutní;
   nahoře: 0;
   vlevo: 0;
   z-index: 90;
   výška: 5000px;
   šířka: 400px;
   }

   Upozorňuji na skutečnost, že je nutné nastavit šířku průhledného bloku (řádek 19), jinak se sbalí na 1 pixel a šířku obecného bloku (řádek 5), jinak text přesáhne průhledný blok (šířku lze sice pro text nastavit, ale zásadní rozdíl nebude). Chcete-li odsadit text a okraj průhledného rámečku, použijte odsazení na šestém řádku. Aby byla průhlednost výškově nastavitelná, dáváme jí vyšší výšku (řádek 18) a překrytí pro obecný blok (řádek 4).
   Vše jsme tedy nacpali do jednoho bloku, který lze strčit do jakékoli části stránky, kde je zajímavé pozadí. Ano, možná budete chtít nastavit pozadí pro společný block_bg, ale je to lepší ne - zkomplikujte si život (samozřejmě v závislosti na úkolu). Jinými slovy, je lepší celou tuto konstrukci nacpat do samostatného bloku, kterému můžete nastavit výplň a nestrádat.
   nevýhody: Příliš těžkopádné.

rgb a hsl, rgba a hsla - vlastnosti CSS3

Přesněji řečeno, ve skutečnosti se nejedná o vlastnosti - jedná se o novou schopnost nastavit barvy pro vlastnosti, jako je pozadí, barva, ohraničení atd.

Název vlastností pochází z barevných systémů RGB (červená, zelená, modrá) a HSL (odstín, satutace, lehkost). První systém popisuje barevný prostor smícháním primárních barev - červené, zelené a modré. Ve druhém systému barevné složky zobrazují informace o barvě v pro člověka známější podobě: Co je to za barvu? Jak intenzivní je? Jak moc je světlo nebo tma?

rgb a rgba

Začněme s rgb a rgba. Hodnoty r, g, b lze nastavit od 0 do 255 nebo od 0% do 100%. Hodnota a (alfa, průhlednost) se měří od 0 do 1 (zlomkové hodnoty se zadávají bodem - 0,4, 0,7 atd.). Pokud jsou r, g a b nastaveny na hodnoty, které překračují jejich platný rozsah (například 300 nebo 110% nebo -5), zmenší se na nejbližší platnou hodnotu.

Podívejme se na vlastnost pozadí jako příklad (i když ti, kteří si přejí, mohou mít barvu nebo ohraničení).

pozadí: rgb (0, 0, 255); / * čistě modrá * /
pozadí: rgb (100%, 50%, 0%); / * čistě modrá * /
pozadí: rgb (10, 145, 500); / * bude rozpoznáno jako 10, 145, 255 * /
pozadí: rgba (10, 145, 255, 1); / * stejné jako předchozí * /
pozadí: rgba (100, 50, 255, 0,1); / * velmi průhledný odstín šeříku * /

Ano, zapomněl jsem říci, že mezi vlastnost a otevírací závorku nemůžete vložit mezeru a některé hodnoty nelze nastavit na stejném řádku v běžných číslech a jiné v procentech. Pokud to uděláte, nic nebude fungovat.

hsl a hsla

A pár slov o hsl a hsla. Hodnota a je nastavena stejným způsobem jako pro rgb a rgba, ale u prvních tří parametrů je situace mírně odlišná. h se pohybuje od 0 do 360, a sa l se pohybuje od 0% do 100%.

A to nejdůležitější. Pokud je v rgb velmi obtížné určit barvu z hlavy (je to téměř vždy nutné program třetí strany„pipetou“), pak stačí mít před očima jeden obrázek, aby vše zapadlo na místo. Na obrázku jsou odstíny parametru h.

Chcete -li odhadnout požadovanou barvu, vyberte odstín, poté odhadujte s, sytost barev (kde 0% je nenasycená barva (odstín šedé) a 100% je největší sytost) a její světlost (0% - s ní barva bude vždy černá a se 100% - bílá). Na základě výše uvedeného obrázek ukazuje tóny při 100% sytosti a 50% lehkosti.

Nyní je celý barevný prostor na první pohled ve vaší hlavě. Ruční výběr samozřejmě nenahradí kapátko a ne každý potřebuje mít v hlavách „barevný prostor“, ale někdy, aby rychle zjistil, co je potřeba a vyzkoušel, mu to vyhovuje.

A jen pár příkladů

pozadí: hsl (180, 100%, 50%); / * tmavě modrá * /
pozadí: hsla (140, 50%, 30%, 0,5); / * poloprůhledný, sotva znatelný jako odstín zelené * /

nevýhody: všechny 4 vlastnosti nejsou podporovány donkey a staršími prohlížeči.

Dokončení

CSS3 obecně poskytuje některé další velmi užitečné věci, ale jako vždy je IE hlavní brzdou pokroku. U klientských webů bych to prozatím upustil od používání (stejně budou marně snášet mozek) a vzal bych tu možnost s PNG. A na vašem webu - proč ne. Zvláště pokud ji navštěvují pokročilí lidé, kteří nesedí na oslech nebo jakýchkoli fragmentech starověku.

S příchodem CSS3 se práce návrhářů rozvržení stala mnohem snazší a logičtější: koneckonců nyní můžete opravdu flexibilně přizpůsobit jakýkoli objekt pomocí JavaScriptu stále méně. Řekněme, že potřebujete upravit průhlednost pozadí – CSS hned nabízí několik možností.

Pozadí je nastaveno sadou atributů, background-repeat, background-attachment, background-origin, background-clip, background-color) a každý z nich lze zapsat samostatně nebo kombinovat pod atribut background. Pojďme se na každého z nich podívat blíže.

Atribut barvy pozadí

Dokonce i IE8 tuto metodu podporuje. Několik obrázků se používá jako pozadí pro tekuté rozvržení. Hlavně si nezapomeňte v CSS nastavit barvu pozadí při použití jakéhokoli obrázku, protože se obrázek nemusí uživatelům jednoduše načíst.

Atribut pozice pozadí

Pokud k nastavení pozadí bloku používáte obrázek, CSS vám umožní umístit obrázek kamkoli na obrazovku. Ve výchozím nastavení je obrázek umístěn v levém horním rohu. Atribut přijímá verbální údaje (nahoře, dole, vlevo, vpravo) nebo číselné údaje (procenta, pixely a další jednotky). V tomto případě musíte zadat dvě hodnoty: horizontálně a vertikálně:

body (background -position: right center;) - v tomto případě bude pozadí umístěno na pravé straně stránky se stejnou spodní a horní vzdáleností od obrázku.

Atribut velikosti pozadí

Někdy je potřeba použít CSS k roztažení nebo zmenšení velikosti pozadí. K tomu použijte atribut background-size a velikost pozadí lze nastavit jak v pixelech nebo procentech, tak v jakýchkoli jiných měrných jednotkách.

S tímto atributem jsou určité problémy: pro správné zobrazení pozadí v dřívějších verzích prohlížečů je nutné použít předpony. Samozřejmě, aktuální verze plně podporuje tento atribut a potřeba konkrétních vlastností zmizela.

Atribut připojení na pozadí

Tento atribut určuje chování posouvání obrázku na pozadí. Může tedy mít 3 hodnoty (s výjimkou dědičnosti, která je společná pro všechny atributy uvedené v tomto článku):

• pevný- činí obraz na pozadí nehybným;
• svitek- pozadí se posouvá spolu se zbytkem prvků;
• místní- obrázek na pozadí se posouvá, pokud se obsah posouvá. Jsou zachycena pozadí, která přesahují rámec obsahu.

Příklad použití:

tělo (připevnění na pozadí opraveno).

Firefox v současné době nepodporuje posledně jmenovanou vlastnost (místní).

Atribut původu na pozadí

Tento atribut je zodpovědný za umístění prvku. Prohlížeče rané verze vyžadují použití předpon. Samotná nemovitost má tři parametry:

• polstrovací box umístí pozadí vzhledem k okraji, přičemž vezme v úvahu tloušťku rámu;
• hraniční box od předchozí vlastnosti se liší tím, že hraniční čára může zcela nebo částečně překrývat pozadí;
• obsah-box umístí obrázek jeho vazbou na obsah.

Pokud je zadáno více hodnot, mohou prohlížeče reagovat odlišně: Firefox a Opera přijímají pouze první možnost.

Atribut opakování pozadí

Pokud je pozadí definováno obrázkem, mělo by se obvykle opakovat vodorovně nebo svisle. K tomu slouží atribut opakování na pozadí. Takže pozadí bloku, jehož CSS obsahuje takovou vlastnost, může mít jeden z několika parametrů:

• neopakovat- obrázek se na stránce objeví v jediné verzi;
• opakovat- pozadí se opakuje podél os x a y;
• opakovat-x- pouze horizontálně;
• opakovat-y- pouze svisle;
• prostor- pozadí se opakuje, ale pokud prostor nelze zaplnit, objeví se mezi obrázky prázdnoty;
• kolo- obrázek se změní, pokud není možné vyplnit celou plochu celými obrázky.

Příklad použití atributu:

tělo (opakování na pozadí: opakování bez opakování)- podobně background-repeat: repeat-y.

V CSS3 je možné nastavit hodnoty pro více obrázků výpisem parametrů oddělených čárkami.

Atribut klip na pozadí

Tento atribut určuje chování pozadí pod hranicemi (například v případě přerušovaných okrajů):

• polstrovací box- pozadí je zobrazeno přísně uvnitř bloku;
• hraniční box- obraz jde pod rámy;
• obsah-box- obrázek na pozadí se objeví pouze uvnitř obsahu.

Příklad použití:

body (background-clip: content-box;).

Chrom a Safari vyžadují předponu -webkit-.

Neprůhlednost a atributy filtru

Atribut opacity umožňuje nastavit průhlednost pozadí - vlastnost CSS bude fungovat ve všech prohlížečích. Hodnota je nastavena v rozsahu od 0,0 do 1,0 včetně. Díky tomu můžete nastavit průhlednost CSS pozadí bez celočíselné hodnoty: místo 0,3 stačí napsat 3:

.block (obrázek na pozadí: url (img.png); neprůhlednost: .3;).

Chcete -li nastavit průhlednost pozadí, jehož CSS je vhodné i pro IE pod verzí 9, použijte atribut filter:

.block (obrázek na pozadí: url (img.png); filtr: alfa (neprůhlednost = 30);).

V tomto případě je hodnota opacity nastavena v rozsahu od 0 do 100. Všimněte si, že atribut opacity se liší od nastavení opacity pomocí RGBA v dědičnosti: při použití neprůhlednosti se transparentní nejen pozadí, ale také všechny prvky uvnitř bloku .

Vždy sledujte statistiky používání prohlížeče v CIS a ve všech ostatních zemích. Největší problém pro všechny návrháře layoutu je, že starší verze IE neumožňují plné využití CSS3. Při kódování nezapomeňte využít speciální služby, které zkontrolují, zda váš prohlížeč podporuje nějakou CSS vlastnost. Pokud nemůžete nainstalovat starší verze prohlížečů, najděte službu, která web zkontroluje různé prohlížeče online.

Úkol

Vytvořte prvek bloku s celým obsahem poloprůhledným.

Řešení

Pro změnu krytí prvku použijte vlastnost opacity style s hodnotou od 0 do 1, kde 0 odpovídá plné průhlednosti a 1 naopak neprůhlednosti objektu. PROTI internetový prohlížeč Explorer tuto vlastnost nefunguje, takže musíte použít filtr speciálně pro ni, vlastnost, která není součástí specifikace CSS. Příklad 1 ukazuje, jak nastavit průhlednost vrstvy pro všechny prohlížeče.

Příklad 1. Poloprůhledná vrstva

HTML5 CSS 2.1 IE Cr Op Sa Fx

Výsledek tento příklad na obr. 1.

Rýže. 1. Poloprůhledná vrstva dovnitř Prohlížeč Safari

Vlastnost filtr přidává průhlednost pouze u prvků, kde je nastaven alespoň jeden z rozměrů (šířka nebo výška) nebo je prvek nastaven na absolutní umístění (pozice: absolutní).

Všimněte si také, že průhlednost ovlivňuje celý obsah vrstvy, včetně dětí, a nebudete pro ně moci zvyšovat úroveň krytí změnou krytí. V příkladu 1, kde je neprůhlednost vrstvy nastavena na 0,7, získá text uvnitř vrstvy stejnou hodnotu. Je přípustné nastavit méně, ale text nesmí překročit hodnotu průhlednosti 0,7.

Účinek průsvitnosti prvku je jasně viditelný na obrázku na pozadí a rozšířil se v různých operační systémy protože vypadá stylově a krásně. Ve webovém designu se také uplatňuje průsvitnost a dosahuje se pomocí vlastnosti opacity nebo barevného formátu RGBA, který je nastaven pro pozadí.

Vlastnost neprůhlednosti

Hlavním rysem této vlastnosti je, že hodnota průhlednosti ovlivňuje všechny děti uvnitř, nejen pozadí. To znamená, že pozadí i text budou průsvitné a nebudete moci zvýšit úroveň průhlednosti přidáním. Stůl 1 ukazuje vzhled textu a pozadí s různými hodnotami krytí.

Příklad 1 ukazuje, jak vytvořit poloprůhledný blok pomocí krytí.

Příklad 1. Pozadí na webové stránce

HTML5 CSS3 IE 9+ Cr Op Sa Fx

RGBA

Podle návrhu by obvykle mělo být průsvitné pouze pozadí prvku a text by měl být neprůhledný, aby byla zachována čitelnost. Vlastnost opacity je zde nevhodná, protože text uvnitř prvku bude také částečně průhledný. Nejlepší je použít formát RGBA, jehož součástí je alfa kanál, nebo jinými slovy hodnotu průhlednosti. Hodnota je zapsána rgba, poté jsou hodnoty složek červené, modré a zelené barvy uvedeny v závorkách oddělených čárkami. Poslední je průhlednost, která je nastavena od 0 do 1 (obr. 1), přičemž 0 je plná průhlednost a 1 je neprůhlednost barvy.

Rýže. 1. Syntaxe pro použití rgba

Příklad 2 ukazuje použití formátu RGBA k vytvoření poloprůhledného pozadí.

Příklad 2. Poloprůhledné pozadí

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 2. Hodnota krytí pro pozadí je nastavena na 90 %.

Rýže. 2. Poloprůhledné pozadí a neprůhledný text

Existují tři způsoby, jak změnit průhlednost prvku v CSS:
pomocí vlastnosti opacity,
pomocí funkce rgba (),
pomocí funkce hsla ().

1. Vlastnost neprůhlednosti

Vlastnost opacity umožňuje zčásti nebo úplně zprůhlednit jakýkoli prvek webové stránky. Tato vlastnost mění průhlednost prvků, které mají obrázek na pozadí (obrázek) nebo pozadí s barvou nebo přechodem. Pokud prvek, pro který je vlastnost opacity použita, obsahuje v sobě další prvky, pak také změní svou neprůhlednost.
Vlastnost opacity se pohybuje od 0 (zcela průhledná) do 1 (neprůhledná), například:

H1 (barva: # CD6829;) div (pozadí: # CDD6DB; neprůhlednost: .3;)
Rýže. 1. Transparentnost prvků pomocí neprůhlednosti

2. Funkce rgba ()

Barevný model RGBA vytváří barevný nádech smícháním v požadovaných poměrech červená (červená), zelená (zelená) a modrá (modrá) barvy a alfa kanál (alfa) je zodpovědný za stupeň průhlednosti barvy. Na rozdíl od vlastnosti opacity u bloku obsahujícího další prvky změní funkce rgba () pouze neprůhlednost bloku.

3. Funkce hsla ()

Funkce Hsla (), jejíž parametry znamenají tón (odstín), nasycení, jas (lehkost) a alfa kanál (alfa), také umožňuje nastavit poloprůhlednou barvu.

Barevné odstíny se zadávají v procentech pomocí odpovídající hodnoty z barevného kruhu. Samotný kruh je rozdělen do sektorů, na jejichž okrajích jsou základní barvy:

0/360 ° - červená
60 ° - žlutá
120 ° - zelená
180 ° - modrá
240° - modrá
270° - fialová
300 ° je purpurová.