Átlátszatlanság A CSS-ben egy olyan tulajdonság, amely meghatározza az olyan elemek átláthatóságának szabályozását, mint pl tartalom vagy képeket . Ezzel a tulajdonsággal bármilyen képet beállíthatunk teljesen átlátszatlanra ( látható ), teljesen átlátszó ( rejtett ), vagy áttetsző (részben látható). A számérték 0 és 1 között van. Ahol a 0 a teljesen átlátszót, az 1 pedig a teljesen láthatót definiálja. A 0 és 1 közötti átlátszatlansági értékek (például 0,2, 0,4, 0,6 stb.) a képet átlátszóról átlátszatlanra változtatják a decimális érték fokozatos növelésével.
Szintaxis
javascript onclick
opacity :
A számértéknek 0 és 1 között kell lennie, hogy a kép félig átlátszó legyen. Ha 1-et adunk meg, a kép átlátszatlan lesz, ha a számérték 0, akkor a kép teljesen átlátszóvá válik.
1. példa : Ebben a példában az átlátszatlanság tulajdonságot fogjuk használni az elem átlátszóvá tételére, amikor az egeret az elem fölé mozgatjuk.
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. Kimenet
Vigye az egeret a piros mezőre az átlátszó vagy átlátszó hatás megjelenítéséhez.
Átmeneti átlátszatlanság a CSS-ben
A CSS-ben a átmeneti átlátszatlanság egy olyan tulajdonság, amely az átlátszatlanság állapotának zökkenőmentes megváltoztatására szolgál egyik szintről a másikra. Ez azt jelenti, hogy az átmeneti opacitás az átlátszatlan elem állapotát átlátszóvá változtatja, meghatározott időtartammal. Az átmenetnek négy tulajdonsága van: átmeneti tulajdonság , átmeneti időtartam, átmeneti időzítés funkció és átmeneti késleltetés , amelyek a kép átlátszatlanság-effektusának végrehajtására szolgálnak. A átmenet-időtartam fontos tulajdonsága a fokozatos vagy hirtelen változásoknak, amelyek tükrözik az elem átlátszatlanságát egy meghatározott időtartamon keresztül, ezredmásodpercekben vagy másodpercekben.
Az átmenet rövidített tulajdonsága a következő:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Szintaxis az átmenet átlátszatlanságának meghatározásához a CSS-ben
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Átmeneti tulajdonság
Az alábbiakban az átmeneti hatások szabályozására használt átmeneti tulajdonságok láthatók.
| Érték | Leírás |
|---|---|
| Átmenet- tulajdon | Ez a CSS-tulajdonság nevének meghatározására szolgál, amely a képek átmeneti hatását mutatja. |
| Átmenet- időtartam | Az átmeneti effektus megjelenítéséhez használt időtartam másodpercben vagy ezredmásodpercben történő meghatározására szolgál. |
| Átmenet-időzítés-függvény | A sebességgörbe meghatározására szolgál egy képen az átmenet hatásának megjelenítéséhez. |
| Átmenet- késleltetés | Meghatározza, hogy az átmenet effektus az elemen vagy a képen legyen elindítva. |
Megjegyzés: Amikor az átmeneti tulajdonságot a képre vagy a tartalomra állítjuk be, meg kell határoznunk az átmeneti időtartam tulajdonságot; ellenkező esetben az időtartam 0 lesz, és nem mutat semmilyen hatást.
Az átmenet átlátszatlanságának szükségessége a CSS-ben
A átlátszatlanság egy egyszerű CSS-tulajdonság, amellyel a kép átlátszóságát szabályozza az átlátszatlanság tartományának 0-tól 1-ig történő beállításával. Az elem statikus vagy hirtelen változását tükrözi az átlátszatlanság hatásának megjelenítéséhez. Például, ha egy képet átlátszóként akarunk megjeleníteni, akkor az átlátszatlanság értékét 0-ról 1-re kell állítani. Ezután egy kis idő helyett azonnal megmutatja az átlátszatlanság effektust. Ezért használjuk a átmeneti átlátszatlanság a CSS-ben, amely egy meghatározott időtartamon keresztül szabályozza az elem átláthatóságát. Az átmeneti opacitásban az átmeneti idő függvényt használva meghatározhatjuk egy elem sebességgörbéjét, amely a képen a gyors átlátszatlanság hatását adja meg. Ily módon az átmeneti átlátszatlanság effektust használjuk a megadott időtartam változásainak tükrözésére, ahelyett, hogy azonnal bekövetkeznének.
tavaszi csizma építészet
2. példa: Ebben a példában az átmeneti opacitás tulajdonságot fogjuk használni, amely az átlátszatlanság hatását egy meghatározott időtartamon belül tükrözi, nem pedig azonnal.
Fájl1.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> Kimenet
