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í