Nepriehľadnosť v CSS je vlastnosť, ktorá určuje ovládať priehľadnosť prvkov ako napr obsahu alebo snímky . Pomocou tejto vlastnosti môžeme ľubovoľné obrázky nastaviť tak, aby boli úplne nepriehľadné ( viditeľné ), plne transparentné ( skryté ), alebo priesvitné (čiastočne viditeľné). Má číselnú hodnotu medzi 0 a 1. Kde 0 definuje úplne priehľadné a 1 definuje úplne viditeľné. Hodnoty nepriehľadnosti medzi 0 a 1, ako napríklad 0,2, 0,4, 0,6 atď., menia obrázok z priehľadného na nepriehľadný postupným zvyšovaním desatinnej hodnoty.
Syntax
opacity :
Číselná hodnota musí byť medzi 0 a 1, aby bol obrázok polopriehľadný. Ak zadáme 1, obrázok bude nepriehľadný, ak je číselná hodnota 0, obrázok sa stane úplne priehľadným.
Príklad 1 : V tomto príklade použijeme vlastnosť opacity, aby bol prvok priehľadný pri pohybe myšou nad prvkom.
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ýkon
Ak chcete zobraziť efekt priehľadnosti alebo nepriehľadnosti, prejdite myšou na červené pole.
Nepriehľadnosť prechodu v CSS
V CSS, a nepriehľadnosť prechodu je vlastnosť používaná na plynulú zmenu stavu nepriehľadnosti z jednej úrovne do druhej. To znamená, že nepriehľadnosť prechodu zmení stav nepriehľadného prvku na priehľadný s definovanou dobou trvania. Prechod má štyri vlastnosti: vlastnosť prechodu , trvanie prechodu, funkcia časovania prechodu a oneskorenie prechodu , ktoré sa používajú na vykonanie efektu nepriehľadnosti na obrázku. The prechodné trvanie je dôležitá vlastnosť pre postupné zmeny alebo náhle zmeny, ktoré odrážajú efekt nepriehľadnosti na prvok počas definovaného časového trvania v milisekundách alebo sekundách.
Skrátená vlastnosť prechodu je nasledovná:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntax na definovanie nepriehľadnosti prechodu 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 } Prechodová vlastnosť
Nasledujú prechodové vlastnosti používané na ovládanie prechodových efektov.
| Hodnota | Popis |
|---|---|
| Prechod- majetok | Používa sa na definovanie názvu vlastnosti CSS, ktorá zobrazuje prechodový efekt na obrázky. |
| Prechod - trvanie | Používa sa na definovanie časového obdobia v sekundách alebo milisekundách na zobrazenie prechodového efektu. |
| Funkcia prechodu-časovania | Používa sa na definovanie krivky rýchlosti na obrázku, aby sa ukázal prechodový efekt. |
| Prechod – oneskorenie | Určuje, či sa prechodový efekt spustí na prvku alebo obrázku. |
Poznámka: Pri nastavovaní vlastnosti prechodu na obrázok alebo obsah musíme definovať vlastnosť transition-duration; v opačnom prípade sa trvanie zmení na 0 a neprejaví sa žiadny účinok.
Potreba nepriehľadnosti prechodu v CSS
The nepriehľadnosť je jednoduchá vlastnosť CSS, ktorá sa používa na ovládanie priehľadnosti obrázka nastavením rozsahu nepriehľadnosti od 0 do 1. Odráža statickú alebo náhlu zmenu prvku, aby sa prejavil efekt nepriehľadnosti. Napríklad, ak chceme zobraziť obrázok ako priehľadný, musíme nastaviť hodnotu opacity od 0 do 1. Potom sa efekt nepriehľadnosti zobrazí okamžite namiesto toho, aby to trvalo nejaký čas. Preto používame a nepriehľadnosť prechodu v CSS, ktorý riadi transparentnosť prvku počas definovaného časového obdobia. Pomocou funkcie prechodu-čas-pri prechodovej nepriehľadnosti môžeme určiť rýchlostnú krivku prvku, ktorá špecifikuje efekt rýchlej nepriehľadnosti na obrázku. Týmto spôsobom používame efekt nepriehľadnosti prechodu na vyjadrenie zmien v zadanom časovom období namiesto toho, aby nastali okamžite.
Príklad 2: V tomto príklade použijeme vlastnosť nepriehľadnosti prechodu, ktorá odráža účinok nepriehľadnosti v určenom čase namiesto okamžitej.
Súbor1.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ýkon
