Alfa kanál (alpha channel)

Příklady z praxe

1. 01

   Průhledné pozadí tlačítka

   Designér chce tmavé tlačítko na fotografii, ale text musí zůstat čitelný. Alfa ve vlastnosti pozadí zprůhlední jen výplň tlačítka, zatímco text zůstane neprůhledný. Samostatná vlastnost opacity se hodí až pro stav disabled, protože ztlumí celý prvek.

   button {
     background: rgb(20 20 20 / 65%);
     color: white;
   }
   
   button[disabled] {
     opacity: 0.45;
   }

2. 02

   Ztmavení náhledu v Canvasu

   Aplikace generuje náhled fotografie s tmavým překryvem a logem. Canvas nejdřív vykreslí fotografii, potom poloprůhlednou černou vrstvu a nakonec logo plnou alfou. Výsledkem je čitelnější náhled bez úprav původního obrázku.

   const ctx = canvas.getContext('2d');
   ctx.drawImage(photo, 0, 0);
   
   ctx.globalAlpha = 0.35;
   ctx.fillStyle = 'black';
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   
   ctx.globalAlpha = 1;
   ctx.drawImage(logo, 24, 24);

Časté omyly

MýtusAlfa nula znamená, že pixel nemá žádnou barvu.

Ve skutečnostiPixel s nulovou alfou může mít uložené RGB hodnoty, jen se při běžné kompozici neprojeví. Tyto hodnoty mohou ovlivnit okraje při škálování nebo filtrování.

MýtusPNG má vždycky alfa kanál.

Ve skutečnostiFormát PNG alfa kanál podporuje, ale konkrétní PNG soubor ho mít nemusí. Některé PNG obrázky jsou plně neprůhledné nebo používají jen jednu průhlednou barvu.

MýtusCSS opacity je totéž jako alfa v barvě.

Ve skutečnostiCSS opacity ovlivní celý prvek včetně potomků. Alfa složka barvy ovlivní jen danou barvu, například pozadí, a ostatní obsah může zůstat plně neprůhledný.

Časté dotazy

Proč má obrázek s alfa kanálem kolem okraje světlý lem?

Světlý lem kolem průhledné ikony často vzniká z barev uložených v pixelech, které mají nízkou nebo nulovou alfu. Při změně velikosti, filtrování nebo exportu se tyto barvy mohou promíchat s viditelnými okraji. Alfa kanál tedy nemusí být problém sám o sobě, problém bývá v původní barvě okrajových pixelů, nesprávném exportu nebo v rozdílu mezi přímou a přednásobenou alfou.

Kdy použít alfa složku barvy místo CSS opacity?

Alfa v barvě je vhodná, když má být průhledná jen konkrétní výplň, rámeček nebo stín. CSS opacity se hodí, když má být průhledný celý prvek najednou, včetně textu, ikon a potomků. Alfa kanál nebo alfa složka barvy proto dává lepší kontrolu nad čitelností UI, zatímco opacity je rychlá volba pro ztlumení celého prvku, například při deaktivovaném stavu.

Ukládá alfa kanál barvu pozadí pod obrázkem?

Alfa kanál neukládá obraz, který se nachází pod průhledným místem. Alfa kanál ukládá jen míru krytí pixelů vlastního obrázku nebo vrstvy. Barva podkladu se do výsledku započítá až při zobrazení nebo renderingu. Stejný PNG soubor s průhledností proto může vypadat jinak na bílém webu, tmavém panelu nebo barevné fotografii.

Proč průhledné objekty v 3D někdy blikají nebo se překrývají špatně?

Pořadí kreslení průhledných objektů je důležité, protože výsledná barva vzniká skládáním popředí a pozadí. Když renderer nakreslí průhledné sklo, kouř nebo listy ve špatném pořadí, může se část scény smíchat s nesprávným podkladem. Neprůhledné objekty tento problém obvykle nemají, protože jejich pixel jednoduše překryje to, co je za nimi.

Zdroje

1. Compositing and Blending Level 1(otevře se v novém okně)W3C
2. CSS Color Module Level 4(otevře se v novém okně)W3C
3. Portable Network Graphics (PNG) Specification (Second Edition)(otevře se v novém okně)W3C
4. CanvasRenderingContext2D: globalAlpha property(otevře se v novém okně)MDN Web Docs

Související pojmy

• Barevný prostorBarevný prostor je definice toho, jakou skutečnou barvu představují číselné hodnoty v obrázku nebo na displeji. Určuje tři věci: primární barvy (rozsah zobrazitelných odstínů), bílý bod a přenosovou funkci mezi uloženým číslem a jasem. Bez této definice je trojice čísel jako 255,128,0 jen bezvýznamný údaj.
• PixelPixel je nejmenší adresovatelný prvek rastrového obrazu, kterému lze přiřadit jednu barvu. Digitální fotografie, obsah obrazovky i textura ve hře jsou mřížkou pixelů uspořádaných do řádků a sloupců. Ve webovém designu navíc CSS pixel neznamená fyzický bod displeje, ale referenční jednotku délky nezávislou na hustotě zobrazovače.
• RozlišeníRozlišení je počet rozlišitelných vzorků obrazu, displeje nebo vykreslovací plochy, nejčastěji vyjádřený v pixelech na šířku a výšku. Určuje, kolik detailu lze zobrazit nebo zpracovat, ale samo o sobě neříká nic jistého o fyzické velikosti, ostrosti, kvalitě panelu ani výkonu aplikace.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• A/B testováníA/B testování je řízený experiment, který porovnává dvě varianty stránky, funkce, ceny nebo sdělení na podobných skupinách uživatelů. Měří předem zvolenou metriku, například konverzi nebo retenci, a pomáhá rozhodnout, zda změna skutečně zlepšuje výsledek, nebo zda pozorovaný rozdíl mohl vzniknout náhodou.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.
• Alt atributAlt atribut je atribut HTML značky <img>, který nese textovou alternativu obrázku pro situace, kdy uživatel obrázek nevidí. Čtou ho odečítače obrazovky, zobrazí se při nenačtení souboru a vyhledávače z něj odvozují obsah obrázku. Prázdná hodnota alt="" je platná a znamená, že obrázek je čistě dekorativní.
• Ambient occlusionAmbient occlusion je technika stínování, která u každého bodu povrchu odhaduje, jak velká část okolní polokoule oblohy je zastíněna blízkou geometrií, a podle toho ztlumí rozptýlené okolní světlo. Výsledkem jsou tmavší kouty, spáry, záhyby a místa dotyku objektů, díky nimž scéna působí prostorově a objekty vypadají skutečně položené na podložce.