Jak nastavit průhlednost obrázku na pozadí v CSS? Průsvitné pozadí Jak zprůhlednit pozadí ve formuláři
Poměrně často lze na internetu najít vhodný obrázek například pro vložení na webovou stránku. Nebo možná vytváříte koláž a potřebujete k jedné kresbě přidat další. Ale obrázky, které potřebujete, mají obvykle nějaké pozadí.
Pojďme zjistit, jak můžeme vytvořit průhledné pozadí pro obrázek pomocí editoruAdobePhotoshop. Mám nainstalovanou anglickou verzi Adobe Photoshop CS5, tak vám ji ukážu.
Pokusím se poskytnout různé kombinace klávesových zkratek.
Pokud ještě nemáte nainstalovaný Photoshop, málokdy ho používáte nebo je v angličtině, můžete si vytvořit průhledné pozadí v Paint.net. Jedná se o jednoduchý editor obrázků v ruském jazyce, který nezabere mnoho místa na vašem pevném disku. Kliknutím na odkaz si můžete přečíst podrobný článek. Program Paint.net si můžete stáhnout z našich webových stránek.
Nejprve se podívejme na jednoduchý příklad. Řekněme, že máte obrázek na obyčejném pozadí, může to být logo nebo název něčeho. Udělejme toto logo nebo nápis na průhledném pozadí ve Photoshopu.
Otevřete požadovaný obrázek v editoru. Nyní vytvoříme průhledné pozadí pro vrstvu. V okně „Vrstvy“ dvakrát klikněte na přidanou vrstvu – naproti ní bude visací zámek. Otevře se okno „Nová vrstva“, v něm klikněte na „OK“. Poté zámek zmizí.
Vyberte nástroj „Kouzelná hůlka“. Na panelu vlastností zadejte úroveň citlivosti, nastavte různé hodnoty, abyste pochopili, jak to funguje, například 20 a 100. Chcete-li zrušit výběr obrázku, stiskněte „Ctrl+D“.
Nastavte citlivost a klikněte kouzelnou hůlkou na oblast pozadí. Chcete-li k vybranému pozadí přidat ty části, které nejsou vybrány, podržte klávesu „Shift“ a pokračujte ve výběru. Chcete-li odstranit vybrané oblasti, klikněte na „Odstranit“.
Nyní je místo pozadí šachovnice - to znamená, že se nám podařilo zprůhlednit bílé pozadí. Odebrat výběr – „Ctrl+D“.
Pokud máte obrázek nebo fotografii, která má spoustu různých barev a objektů, podívejme se, jak vytvořit průhledné pozadí obrázku ve Photoshopu.
V tomto případě použijeme nástroj Rychlý výběr. Klikněte na kouzelnou hůlku levým tlačítkem myši s mírným zpožděním a vyberte z nabídky požadovaný nástroj.
Nyní musíme vybrat objekt, který chceme ponechat na průhledném pozadí. Na panelu vlastností nastavte různé velikosti a klikněte na objekt a přidejte k němu oblasti. Pokud je omylem vybráno nepotřebné pozadí, stiskněte „Alt“ a odstraňte jej.
Chcete-li zobrazit výsledek, stiskněte "Q". Části obrázku, které se stanou průhlednými, budou zvýrazněny růžově.
Zkopírujte vybrané oblasti stisknutím „Ctrl+C“. Dále vytvořte nový soubor „Ctrl+N“ s průhledným pozadím.
Vložte do něj zkopírované fragmenty „Ctrl + V“. Pokud na nich zbyly nějaké zbytečné části pozadí, odstraňte je pomocí nástroje Guma. Snímky pořízené na průhledném pozadí ukládáme ve formátu PNG nebo GIF.
Udělejte průhledné bílé pozadí obrázku nebo vytvořte průhledné pozadí pro jednotlivé fragmenty barevného obrázku nebo fotografie ve Photoshopu. Poté je můžete v případě potřeby použít: vložit je na webovou stránku, přidat je do jiného výkresu nebo vytvořit zajímavé koláže.
Průhlednost pozadí CSS
Průhlednost pozadí na webu je vytvořena pomocí vlastností CSS. Průhlednosti můžete dosáhnout dvěma způsoby: prostřednictvím vlastnosti opacity a background:rgba(). Podívejme se na každý z nich a pak udělejme srovnání.
1. CSS vlastnost opacity pro průhlednost pozadí
CSS má vlastnost opacity, pomocí které lze nastavit průhlednost obrázků, textů včetně pozadí.
Průhlednost se určuje jednoduše zadáním reálného čísla od 0,0 do 1,0. Čím nižší číslo, tím méně nápadný bude objekt.
krytí: 0,5; // Průhlednost: 0,2; // Objekt je viditelný pouze při 20% krytí: 0,8; // Objekt je viditelný pouze z 80 %.
Podívejme se na příklad s vlastností opacity.
Text je také transparentní
2. Průhlednost pomocí vlastnosti CSS background:rgba().
Druhou možností pro nastavení průhlednosti pozadí na webu je vlastnost CSS background:rgba. Podívejme se na příklad
Text je také transparentní
Tento kód se na stránce překládá do následujícího:
Rozdíl mezi těmito dvěma metodami je ten, že text uvnitř bloku se při použití neprůhlednosti stává průhledným.
V druhém případě takový problém není. Proto se musíte podívat na situaci - co přesně očekáváte.
Průsvitný efekt prvku je jasně viditelný na obrázku na pozadí a rozšířil se v různých operačních systémech, protože vypadá stylově a krásně. Ve webdesignu se také používá průsvitnost a dosahuje se jí prostřednictvím vlastnosti opacity nebo formátu barev RGBA, který je nastaven pro pozadí.
Neprůhlednost
Hlavním rysem této vlastnosti je, že hodnota průhlednosti ovlivňuje všechny podřízené prvky v ní, nejen pozadí. To znamená, že pozadí i text budou průsvitné a nebudete moci zvýšit úroveň průhlednosti přidáním . V tabulce Obrázek 1 ukazuje vzhled textu a pozadí s různými hodnotami krytí.
Příklad 1 ukazuje, jak vytvořit poloprůhledný blok pomocí neprůhlednosti.
Příklad 1: Pozadí na webové stránce
HTML5 CSS3 IE 9+ Cr Op Sa Fx
neprůhlednost
RGBA
Podle návrhu by mělo být průhledné pouze pozadí prvku a text by měl být neprůhledný, aby byla zachována čitelnost. Vlastnost opacity zde není vhodná, protože text uvnitř prvku bude také částečně průhledný. Nejlepší je použít formát RGBA, který má jako součást alfa kanál nebo jinými slovy hodnotu průhlednosti. Hodnota se zapisuje rgba , hodnoty červené, modré a zelené barevné složky jsou uvedeny v závorkách oddělené čárkami. Poslední je průhlednost, která se nastavuje od 0 do 1 (obr. 1), přičemž 0 znamená úplnou průhlednost a 1 neprůhlednost barvy.
Rýže. 1. Syntaxe pro použití rgba
Příklad 2 ukazuje použití formátu RGBA k vytvoření průsvitného pozadí.
Příklad 2. Průsvitné pozadí
HTML5 CSS3 IE 9+ Cr Op Sa Fx
rgba
Hobbes byl jedním z prvních, kdo upozornil na tento problém z pohledu psychologie.
Výsledek tohoto příkladu je znázorněn na Obr. 2. Krytí pozadí je nastaveno na 90 %.
Rýže. 2. Průsvitné pozadí a neprůhledný text
K vytvoření transparentního efektu v CSS se používá vlastnost opacity.
IE8 a starší verze podporují alternativní vlastnost - filter:alpha(opacity=x) , kde "x" se může pohybovat od 0 do 100 , čím nižší je hodnota, tím transparentnější bude prvek.
Všechny ostatní prohlížeče podporují standardní neprůhlednost vlastnosti CSS, která může mít jako hodnotu číslo od 0,0 do 1,0, čím nižší je hodnota, tím transparentnější bude prvek:
Název dokumentu
Snaž se "
Průhlednost při vznášení
Pseudotřída:hover umožňuje změnit vzhled prvků, když na ně najedete kurzorem myši. Tuto funkci použijeme k tomu, aby obrázek ztratil svou průhlednost, když na něj najedete myší:
Název dokumentu
Snaž se "
Průhlednost pozadí
Existují dva možné způsoby, jak zprůhlednit prvek: vlastnost opacity popsaná výše a určení barvy pozadí ve formátu RGBA.
Model reprezentace barev RGB již možná znáte. RGB (Red, Green, Blue - červená, zelená, modrá) je barevný systém, který určuje odstín smícháním červené, zelené a modré. Chcete-li například nastavit barvu textu na žlutou, můžete použít kteroukoli z následujících deklarací:
Barva: rgb(255,255,0); barva: rgb(100%,100%,0);
Barvy určené pomocí RGB se budou lišit od hexadecimálních hodnot, které jsme používali dříve, v tom, že umožňují použití kanálu průhlednosti alfa. To znamená, že přes pozadí prvku s průhledností alfa bude vidět to, co se nachází pod ním.
Deklarace barvy RGBA je syntaxí podobná standardním pravidlům RGB. Budeme však také muset deklarovat hodnotu jako RGBA (místo RGB) a zadat další desetinnou hodnotu průhlednosti po hodnotě barvy mezi 0,0 (plně průhledná) a 1 (plně neprůhledná).
Rozdíl mezi vlastností opacity a vlastností RGBA je v tom, že vlastnost opacity aplikuje průhlednost na celý prvek, což znamená, že celý obsah prvku se stane průhledným. A RGBA umožňuje nastavit průhlednost jednotlivých částí prvku (například pouze textu nebo pozadí):
Poznámka: Hodnoty RGBA nejsou podporovány v IE8 a starších verzích. Chcete-li deklarovat záložní barvu pro starší prohlížeče, které nepodporují hodnoty barev alfa, měli byste ji zadat jako první před hodnotou RGBA: background: rgb(255,255,0); pozadí: rgba(255,255,0,0,5);
Dnes chci mluvit o průhledném pozadí bloku textu, jak jej vytvořit a co k tomu 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 toho dosáhnout a jaké problémy vznikají. Pro demonstraci použijeme tento obrázek zpracovaný nějakým programem v Javě, na který se bohužel už dávno ztratil odkaz.
Podívejte se na obrázek níže. Existuje grafické pozadí, na kterém chcete překrýt průsvitný blok textem. Ideálně by to mělo být to, co je na obrázku očíslováno 2, ale někdy se může vyskytnout to, co je očíslováno 3. Je tam ještě jedna vada, ale tu slovně zmíním o něco níže, protože Neexistoval způsob, jak z toho udělat snímek obrazovky.
Průsvitné pozadí bez rgba a hsla
Průsvitný PNG. Nejlepší varianta, protože Dnes je to nejvíce cross-browser a nejjednodušší. Aby byl blok průhledný, je potřeba jednopixelový průsvitný PNG, který je nastaven jako pozadí bloku. To je vše. Nedostatky: Vyžaduje se pouze jeden.
Transparentnost díky neprůhlednosti. Průhlednost bloku se v různých prohlížečích nastavuje takto:
kde 0,5 a 50 je 50% průhlednost. Ale je tu problém. Pokud nastavíme blok, který potřebujeme, aby měl takovou průsvitnost, pak na obrázku výše uvidíme onu třetí možnost - zprůsvitní se i obsah bloku. Existuje však cesta ven - volné polohování, s jehož pomocí se pod textový blok umístí další blok, kterému je dána průsvitnost.
Podívejme se na příklad. Nechť je blok s oranžovým obrázkem značka 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 - #block_text.
Upozorňujeme, ž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 bude text přesahovat průhledný blok (i když šířku lze u textu nastavit, ale není zde žádný zásadní rozdíl vůle). Abychom měli odsazení od textu a okraje průhledného bloku, použijeme odsazení v šestém řádku. Aby byla průhlednost výškově nastavitelná, dáme jí vyšší výšku (řádek 18) a přesah pro obecný blok (řádek 4). Vše jsme tedy dali do jednoho bloku, který lze nasunout do kterékoli části stránky, kde je zajímavé pozadí. Ano, možná budete chtít umístit pozadí na obecný blok block_bg, ale je lepší to neudělat – zkomplikujete si život (samozřejmě v závislosti na úkolu). Jinými slovy, je lepší celou tuto strukturu strčit do samostatného bloku, který může mít výplň a nemusíte se o to starat. Nedostatky: Příliš těžkopádné.
rgb a hsl, rgba a hsla – vlastnosti CSS3
Přesněji řečeno, nejedná se přesně o vlastnosti - jedná se o novou možnost nastavení barev pro vlastnosti, jako je pozadí, barva, ohraničení atd.
Názvy vlastností pocházejí z barevných systémů RGB (Red, Green, Blue) a HSL (Hue, Satutation, Lightness). 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ě ve formě, která je lidem známější: Co je to za barvu? Jak moc je nasycený? Jak je světlý nebo tmavý?
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 jsou specifikovány tečkou - 0,4, 0,7 atd.). Pokud jsou r, g a b nastaveny na hodnoty vyšší, než je jejich přijatelný rozsah (například 300 nebo 110 % nebo -5), zmenší se na nejbližší přijatelnou hodnotu.
Podívejme se na vše pomocí vlastnosti pozadí jako příklad (ačkoli kdo si přeje, může použít barvu nebo ohraničení).
Ano, zapomněl jsem říct, že nemůžete vložit mezeru mezi vlastnost a úvodní závorku a nemůžete nastavit některé hodnoty v běžných číslech a jiné v procentech na stejném řádku. Pokud to uděláte, nic nebude fungovat.
hsl a hsla
A pár slov o hsl a hsla. Hodnota a se nastavuje stejným způsobem jako u rgb a rgba, ale s prvními třemi parametry jsou věci trochu jiné. h lze nastavit od 0 do 360 a s a l lze nastavit od 0 % do 100 %.
A to nejdůležitější. Pokud je v RGB velmi těžké určit barvu z hlavy (téměř vždy potřebujete nějaký program třetí strany s kapátkem), tak zde stačí mít jeden obrázek před očima, aby vše zapadlo. Na obrázku jsou odstíny parametru h.
Chcete-li odhadnout požadovanou barvu, vyberte odstín, poté odhadněte s, sytost barvy (kde 0 % je nenasycená barva (šedý tón) a 100 % je nejsytější) a její světlost (0 % - s tím bude barva vždy být černá a se 100% - bílá). Na základě výše uvedeného obrázek ukazuje světlé tóny při 100% sytosti a 50% světlosti.
Nyní je celý barevný prostor ve vaší hlavě na první pohled. Ruční výběr samozřejmě nenahrazuje pipetu a ne každý musí mít v hlavě „barevný prostor“, ale někdy se to hodí, abychom rychle zjistili, co je potřeba a otestovali.
Nedostatky: Všechny 4 vlastnosti nejsou podporovány donkey a staršími prohlížeči.
Dokončení
Obecně CSS3 poskytuje některé velmi užitečné věci, ale jako vždy je hlavní brzdou pokroku IE. U klientských webů bych se toho zatím zdržel (marně mi budou plýtvat mozkem) a vzal bych možnost s PNG. A na vašem webu – proč ne. Zvláště pokud jej navštěvují pokročilí lidé, kteří nesedí na oslech ani žádných střípcích starověku.
Hezký den, nadšenci do vývoje webu a nováčci. Pro ty, kteří nesledují IT trendy, respektive webovou módu, bych rád slavnostně oznámil, že tato publikace na téma: „Jak vyrobit průhledný blok s css nástroji“ je jako stvořená pro vás. V aktuálním roce 2016 je totiž zavádění různých transparentních objektů do online služeb považováno za stylový krok.
Proto vám v tomto článku řeknu o všech existujících metodách vytváření průhlednosti, počínaje předpotopními řešeními, zaměřím se na kompatibilitu řešení s prohlížeči a také uvedu konkrétní příklady programového kódu. Nyní se dáme do práce!
Metoda 1. Předpotopní
Když byly počítače ještě slabé a „schopnosti“ nebyly vyvinuty, vývojáři přišli s vlastním způsobem, jak vytvořit průhledné pozadí: pomocí průhledných pixelů střídavě s barevnými. Takto vytvořený blok vypadal při zmenšení jako šachovnice, ale při normální velikosti připomínal jakousi průhlednost.
Tato, podle mého názoru, „berlička“ určitě pomáhá ve starších verzích prohlížečů, ve kterých moderní řešení nefungují. Ale stojí za zmínku, že kvalita zobrazení textu ,
vepsaný v takové, prudce klesá.
Metoda 2. Nevadí
Ve vzácných případech řeší vývojáři problém zavedení průsvitného obrázku vložením... již hotového průsvitného obrázku! K tomuto účelu slouží obrázky uložené ve formátu PNG-24. Tento grafický formát umožňuje nastavit 256 úrovní průsvitnosti.
Dnes profesionálové používají nástroj rgba (r, g, b, a).
Již dříve jsem vám řekl, že RGB je jedním z oblíbených barevných modelů, kde R je zodpovědné za všechny odstíny červené, G za odstíny zelené a B za odstíny modré.
V případě parametru css je proměnná A zodpovědná za alfa kanál, který je zase zodpovědný za transparentnost.
Hlavní výhodou posledně jmenované metody je, že alfa kanál neovlivňuje objekty umístěné uvnitř stylizovaného bloku.
rgba(r, g, b, a) je podporováno od:
Opera verze 10;
Internet Explorer 9;
Safari 3.2;
3 verze Firefoxu.
Rád bych upozornil na zajímavou skutečnost! Milovaný Internet Explorer 7 hází chybu při kombinování vlastností barva pozadí s názvem barev (barva pozadí: zlatá). Proto byste měli používat pouze: