Necaurredzamība CSS ir īpašums, kas nosaka, lai kontrolētu tādu elementu caurspīdīgumu kā saturu vai attēlus . Izmantojot šo īpašību, mēs varam iestatīt jebkuru attēlu pilnīgi necaurspīdīgu ( redzams ), pilnībā caurspīdīgs ( paslēptas ), vai caurspīdīgs (daļēji redzams). Skaitliskā vērtība ir no 0 līdz 1. Kur 0 definē pilnībā caurspīdīgu un 1 definē pilnīgi redzamu. Necaurredzamības vērtības no 0 līdz 1, piemēram, 0,2, 0,4, 0,6 utt., maina attēlu no caurspīdīga uz necaurspīdīgu, pakāpeniski palielinot decimālvērtību.
Sintakse
opacity :
Lai attēls būtu daļēji caurspīdīgs, skaitliskajai vērtībai ir jābūt no 0 līdz 1. Ja norādīsim 1, attēls būs necaurspīdīgs, ja skaitliskā vērtība ir 0, attēls kļūst pilnīgi caurspīdīgs.
1. piemērs : šajā piemērā mēs izmantosim necaurredzamības īpašību, lai padarītu elementu caurspīdīgu, pārvietojot peles kursoru virs elementa.
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. Izvade
Novietojiet peles kursoru virs sarkanā lodziņa, lai parādītu caurspīdīgu vai necaurredzamu efektu.
Pārejas necaurredzamība CSS
Izmantojot CSS, a pārejas necaurredzamība ir īpašība, ko izmanto, lai vienmērīgi mainītu necaurredzamības stāvokli no viena līmeņa uz citu. Tas nozīmē, ka pārejas necaurredzamība maina necaurspīdīgā elementa stāvokli uz caurspīdīgu ar noteiktu laiku. Pārejai ir četras īpašības: pārejas rekvizīts , pārejas ilgums, pārejas laika funkcija un pārejas aizkave , ko izmanto, lai attēlam radītu necaurredzamības efektu. The pārejas ilgums ir svarīga īpašība pakāpeniskām izmaiņām vai pēkšņām izmaiņām, kas atspoguļo elementa necaurredzamības efektu noteiktā laika periodā milisekundēs vai sekundēs.
Saīsinātā pārejas īpašība ir šāda:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Sintakse, lai definētu pārejas necaurredzamību 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ārejas īpašums
Tālāk ir norādīti pārejas rekvizīti, ko izmanto, lai kontrolētu pārejas efektus.
| Vērtība | Apraksts |
|---|---|
| Pāreja- īpašums | To izmanto, lai definētu CSS rekvizīta nosaukumu, kas parāda pārejas efektu uz attēliem. |
| Pāreja- ilgums | To izmanto, lai definētu laika periodu sekundēs vai milisekundēs, lai parādītu pārejas efektu. |
| Pārejas-laika-funkcija | To izmanto, lai definētu attēla ātruma līkni, lai parādītu pārejas efektu. |
| Pāreja- kavēšanās | Norāda, vai pārejas efekts tiek uzsākts elementā vai attēlā. |
Piezīme. Iestatot attēla vai satura pārejas rekvizītu, mums ir jādefinē pārejas ilguma rekvizīts; pretējā gadījumā ilgums kļūst par 0, un tas nerādīs nekādu efektu.
Nepieciešamība pēc pārejas necaurredzamības CSS
The necaurredzamība ir vienkāršs CSS rekvizīts, ko izmanto, lai kontrolētu attēla caurspīdīgumu, iestatot necaurredzamības diapazonu no 0 līdz 1. Tas atspoguļo statiskas vai pēkšņas elementa izmaiņas, lai parādītu necaurredzamības efektu. Piemēram, ja mēs vēlamies attēlu parādīt kā caurspīdīgu, mums ir jāiestata necaurredzamības vērtība no 0 līdz 1. Pēc tam tas parāda necaurredzamības efektu uzreiz, nevis aizņem kādu laiku. Tāpēc mēs izmantojam a pārejas necaurredzamība CSS, kas kontrolē elementa caurspīdīgumu noteiktā laika periodā. Izmantojot pārejas laika necaurredzamības funkciju, mēs varam noteikt elementa ātruma līkni, kas nosaka attēla ātrās necaurredzamības efektu. Tādā veidā mēs izmantojam pārejas necaurredzamības efektu, lai atspoguļotu izmaiņas norādītajā laika periodā, nevis uzreiz.
2. piemērs: Šajā piemērā mēs izmantosim pārejas necaurredzamības īpašību, kas atspoguļo necaurredzamības efektu noteiktā laika periodā, nevis nekavējoties.
Fails1.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> Izvade
