Tento článek vám představí koncept, který vám pomůže porozumět neprůhlednosti a řeknu vám, jak tento parametr ovládat. V tomto článku se budeme zabývat následujícími ukazateli,
- Neprůhlednost v CSS
- Neprůhlednost zděděná kaskádovými prvky
- Nastavení atributu RGBA pro kaskádové prvky
- Změny krytí u efektu přechodu
Neprůhlednost pozadí prvku je užitečným nastavením funkcí v designu HTML. Nastavením úrovně krytí (inverzní k průhlednosti) může návrhář řídit viditelnost prvku prostřednictvím vlastnosti krytí CSS. Toto se obecně používá jako nastavení pozadí, když jsou kaskádové prvky umístěné jeden nad druhým.
Nejběžnější scénář, ve kterém se tato funkce používá, je tento:
- Za textovým prvkem je umístěn částečně průhledný obrázek na pozadí.
- Obrázek na pozadí je nejasně viditelný, takže nedefinuje text vpředu.
- Obrázek se může plně zaostřit, když se uživatel výslovně rozhodne jej zobrazit.
Možná budete chtít přečíst na než se pustíte do učení o neprůhlednosti CSS.
Komplexní výukový program CSS najdete na Výukový program pro CSS Edureka pro začátečníky . Získáte vynikající heads-up o způsobu, jakým má být CSS použit k rozšíření webového designu HTML.
Pokračujeme tímto článkem o neprůhlednosti v CSS
Neprůhlednost v CSS
V CSS je opacita nastavena jako číselná hodnota v rozmezí 0,0 - 1,0. Hodnoty blížící se nule představují větší průhlednost, obraz bude velmi dobře viditelný. Začněme příkladem obrázku s 50% průhledností. Viz příklad 1 níže.
Příklad 1: Obrázek na pozadí nastaven na polo- průhlednost
img {opacita: 0,5 filtr: alfa (opacita = 50) / * pro IE8 a starší * /} 
Příklad 1: Výstup
Originální obrázek (100% neprůhlednost)
Obrázek s 50% nastavením krytí
Ve výše uvedeném příkladu byl pouze jeden prvek - obrázek. Pomocí parametru krytí lze také nastavit další prvky, například text, prvky div a tak dále.
Pokračujeme tímto článkem o neprůhlednosti v CSS
Neprůhlednost zděděná kaskádovými prvky
Pokud jsou prvky skládány jeden na druhém, má-li prvek pozadí nastavení krytí, pak je zděděn všemi podřízenými prvky. To je výchozí nastavení . To znamená, že pokud je nad obrázek umístěno textové pole a obrázek má nastavení opacity 0,5, bude obrazový i textový prvek viditelný pouze částečně.
Vezměme si instanci podřízeného textového prvku umístěného nad obrazem TOM & JERRY v našem dalším příkladu. V příkladu 2 vidíme výchozí efekt krytí.
.container {position: relative text-align: center opacity: 0,5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRYPříklad 2: Text zdědí neprůhlednost z nadřazeného obrázku
Pokračujeme tímto článkem o neprůhlednosti v CSS
Nastavení atributu RGBA pro kaskádové prvky
Existuje další způsob, kterým lze opacitu řídit pomocí kaskádových prvků. Pokud chcete, aby podřízený prvek zůstal nedotčen neprůhledností jeho prvku pozadí, můžete použít Nastavení atributu RGBA .
Příklad 3: Použití nastavení RGBA
pozadí: rgba (76, 175, 80, 1,0) / * Obrázek nemá žádné nastavení krytí * / / * Zelené pozadí pro text se 100% krytím * / / * Text v modré barvě má 100% krytí * /
pozadí: rgba (76, 175, 80, 0,4) / * Obrázek nemá žádné nastavení krytí * / / * Zelené pozadí pro text se 40% krytím * / / * Modrý text se stále zobrazuje se 100% krytím * /
co je připojeno v Javě
Po barevném kódu RGB znamená atribut „a“ alfa . The alfa parametr je číslo mezi 0,0 (plně transparentní) a 1,0 (zcela neprůhledné).
Pokračujeme tímto článkem o neprůhlednosti v CSS
Změny krytí u efektu přechodu
V některých scénářích chtějí weboví designéři, aby se krytí lišilo v závislosti na tom, zda je uživatel zaměřen na prvek nebo ne. Řekněme například, že obrázek je ve výchozím nastavení nastaven na 50% krytí. Když však uživatel umístí ukazatel myši na obrázek, chceme, aby se obrázek plně zaostřil se 100% neprůhledností.
Příklad 4 ukazuje, jak se to dělá.
Společné body k poznámce:
- Nastavení krytí je alternativou k použití atributu ‘viditelnost’ v CSS. Použití nastavení krytí však usnadňuje nastavení různých stupňů průhlednosti, od nuly po plnou.
- Úroveň neprůhlednosti je třeba nastavit po pečlivém testování v různých prohlížečích. Když je krytí nastaveno na nízké hodnoty, může se text nebo obrázek někdy stát zcela neviditelným nebo nečitelným.
- Myšlenkou použití neprůhlednosti je ostré zaměření na některé prvky, zatímco jiné prvky pozadí neodvádějí pozornost uživatele. Takové prvky pozadí jsou tedy nastaveny s nižší neprůhledností.
- V aplikaci Internet Explorer je u opce IE8 a starších verzí vlastnost neprůhlednosti nastavení „filtru“ v rozsahu od 1 do 100. Ve všech ostatních prohlížečích je v rozsahu od 0 do 1.
Tím se dostáváme na konec tohoto článku o Opacity In CSS.
Pokud se chcete dozvědět více o vývoji webu, podívejte se na podle Edureka. Osvědčení o školení pro vývoj webových aplikací vám pomůže Naučte se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit do služby Amazon Simple Storage Service (S3).
Pokud máte stále zájem Máte-li jakékoli dotazy, můžete je zveřejnit v sekci komentářů tohoto blogu „Opacity In CSS“ a my se vám ozveme co nejdříve.