Neprůhlednost v CSS je vlastnost, která určuje k ovládání průhlednosti prvků jako např obsah nebo snímky . Pomocí této vlastnosti můžeme nastavit libovolné obrázky tak, aby byly zcela neprůhledné ( viditelné ), plně transparentní ( skrytý ), nebo průsvitné (částečně viditelné). Nabývá číselné hodnoty mezi 0 a 1. Kde 0 definuje plně průhledné a 1 definuje zcela viditelné. Hodnoty neprůhlednosti mezi 0 a 1, jako je 0,2, 0,4, 0,6 atd., mění obraz z průhledného na neprůhledný postupným zvyšováním desetinné hodnoty.
Syntax
opacity :
Číselná hodnota musí být mezi 0 a 1, aby byl obrázek poloprůhledný. Pokud zadáme 1, bude obrázek neprůhledný, pokud je číselná hodnota 0, obrázek se stane zcela průhledným.
substring_index v sql
Příklad 1 : V tomto příkladu použijeme vlastnost opacity k tomu, aby byl prvek průhledný, když na něj najedeme myší.
Main.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Výstup
Přejetím myší na červený rámeček zobrazíte efekt průhlednosti nebo neprůhlednosti.
mediální přenos
Neprůhlednost přechodu v CSS
V CSS , a neprůhlednost přechodu je vlastnost používaná k plynulé změně stavu neprůhlednosti z jedné úrovně do druhé. To znamená, že neprůhlednost přechodu změní stav neprůhledného prvku na průhledný s definovanou dobou trvání. Přechod má čtyři vlastnosti: transition-property , transition-duration, transition-timing-function a transition-delay , které se používají k provedení efektu neprůhlednosti na obrázku. The přechodné trvání je důležitá vlastnost pro postupné změny nebo náhlé změny, které odrážejí účinek neprůhlednosti na prvek po definovanou dobu trvání v milisekundách nebo sekundách.
Zkrácená vlastnost přechodu je následující:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntaxe pro definování krytí přechodu v CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Přechodová vlastnost
Následují přechodové vlastnosti používané k ovládání přechodových efektů.
| Hodnota | Popis |
|---|---|
| Přechod- vlastnictví | Používá se k definování názvu vlastnosti CSS, která ukazuje přechodový efekt na obrázky. |
| Přechod - trvání | Používá se k definování časového období v sekundách nebo milisekundách pro zobrazení přechodového efektu. |
| Funkce časování přechodu | Používá se k definování křivky rychlosti na obrázku pro zobrazení přechodového efektu. |
| Přechod – zpoždění | Určuje, zda se přechodový efekt spustí na prvku nebo obrázku. |
Poznámka: Při nastavování vlastnosti přechodu na obrázek nebo obsah musíme definovat vlastnost transition-duration; jinak se doba trvání změní na 0 a neprojeví se žádný účinek.
Potřeba neprůhlednosti přechodů v CSS
The neprůhlednost je jednoduchá vlastnost CSS, která se používá k ovládání průhlednosti obrázku nastavením rozsahu krytí od 0 do 1. Odráží statickou nebo náhlou změnu prvku, aby se zobrazil efekt krytí. Chceme-li například zobrazit obrázek jako průhledný, musíme nastavit hodnotu krytí od 0 do 1. Poté se efekt krytí zobrazí okamžitě, místo aby to trvalo nějakou dobu. Proto používáme a neprůhlednost přechodu v CSS, které řídí průhlednost prvku během definovaného časového období. Pomocí funkce přechod-čas-průhlednosti přechodu můžeme určit rychlostní křivku prvku, která specifikuje efekt rychlé neprůhlednosti na obrázku. Tímto způsobem využíváme efekt neprůhlednosti přechodu, abychom odráželi změny v zadaném časovém období, místo aby nastaly okamžitě.
Příklad 2: V tomto příkladu použijeme vlastnost neprůhlednosti přechodu, která odráží účinek neprůhlednosti v zadaném časovém období namísto okamžitě.
Soubor1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Výstup
java reverzní řetězec
