Neskaidrumas CSS yra ypatybė, nurodanti valdyti elementų, pvz., skaidrumą turinys arba vaizdai . Naudodami šią savybę bet kuriuos vaizdus galime nustatyti, kad jie būtų visiškai nepermatomi ( matomas ), visiškai skaidrus ( paslėptas ), arba permatomas (iš dalies matomas). Skaitinė reikšmė yra nuo 0 iki 1. Kur 0 reiškia visiškai skaidrų, o 1 – visiškai matomą. Nepermatomumo reikšmės nuo 0 iki 1, pvz., 0,2, 0,4, 0,6 ir tt, pakeičia vaizdą iš skaidraus į nepermatomą, palaipsniui didinant dešimtainę reikšmę.
Sintaksė
opacity :
Skaitinė reikšmė turi būti nuo 0 iki 1, kad vaizdas būtų pusiau skaidrus. Jei pateikiame 1, vaizdas bus nepermatomas, jei skaitinė reikšmė yra 0, vaizdas tampa visiškai skaidrus.
skaitytuvas java
1 pavyzdys : Šiame pavyzdyje naudosime nepermatomumo ypatybę, kad elementas būtų skaidrus, kai perkeliame pelę virš elemento.
Pagrindinis.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. Išvestis
Užveskite pelės žymeklį virš raudono langelio, kad būtų rodomas skaidrumo arba neskaidrumo efektas.
rasti žemėlapyje c++
Perėjimo neskaidrumas CSS
CSS, a pereinamasis neskaidrumas yra savybė, naudojama sklandžiai pakeisti neskaidrumo būseną iš vieno lygio į kitą. Tai reiškia, kad pereinamasis neskaidrumas pakeičia nepermatomo elemento būseną į skaidrią tam tikrą laiką. Perėjimas turi keturias savybes: perėjimo savybė , perėjimo trukmė, perėjimo laiko funkcija ir perėjimo delsa , naudojamos vaizdo neskaidrumo efektui atlikti. The pereinamasis laikotarpis yra svarbi laipsniškų ar staigių pakeitimų savybė, atspindinti elemento neskaidrumo efektą per tam tikrą laiką milisekundėmis arba sekundėmis.
Trumpoji perėjimo savybė yra tokia:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Sintaksė, skirta apibrėžti perėjimo neskaidrumą 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 } Pereinamoji nuosavybė
Toliau pateikiamos perėjimo savybės, naudojamos perėjimo efektams valdyti.
| Vertė | apibūdinimas |
|---|---|
| Perėjimas- nuosavybė | Jis naudojamas apibrėžti CSS ypatybės, rodančios perėjimo į vaizdus efektą, pavadinimą. |
| Perėjimas- trukmė | Jis naudojamas apibrėžti laikotarpį sekundėmis arba milisekundėmis, kad būtų rodomas perėjimo efektas. |
| Perėjimas-laikas-funkcija | Jis naudojamas vaizdo greičio kreivei apibrėžti, kad būtų parodytas perėjimo efektas. |
| Perėjimas – vėlavimas | Nurodo, ar perėjimo efektas inicijuojamas elemente ar paveikslėlyje. |
Pastaba: nustatydami vaizdo ar turinio perėjimo ypatybę, turime apibrėžti perėjimo trukmės savybę; kitu atveju trukmė tampa 0 ir nebus jokio poveikio.
Perėjimo nepermatomumo poreikis CSS
The neskaidrumas yra paprasta CSS savybė, naudojama vaizdo skaidrumui valdyti, nustatant neskaidrumo diapazoną nuo 0 iki 1. Ji atspindi statinį arba staigų elemento pokytį, kad parodytų neskaidrumo efektą. Pavyzdžiui, jei norime, kad vaizdas būtų skaidrus, nepermatomumo reikšmę turime nustatyti nuo 0 iki 1. Po to neskaidrumo efektas parodomas iš karto, o ne užtruks. Todėl naudojame a pereinamasis neskaidrumas CSS, kuris kontroliuoja elemento skaidrumą per nustatytą laikotarpį. Naudodami pereinamojo laikotarpio neskaidrumo funkciją, galime nustatyti elemento greičio kreivę, kuri nurodo greito vaizdo neskaidrumo efektą. Tokiu būdu mes naudojame perėjimo neskaidrumo efektą, kad atspindėtume pokyčius per nurodytą laikotarpį, o ne iškart.
2 pavyzdys: Šiame pavyzdyje mes naudosime perėjimo neskaidrumo savybę, kuri atspindi neskaidrumo efektą per tam tikrą laiką, o ne iš karto.
Failas1.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> Išvestis
liūtas, palyginti su tigru
