Neprozirnost u CSS-u je svojstvo koje određuje kontrolu transparentnosti elemenata kao što su sadržaj ili slike . Pomoću ovog svojstva možemo postaviti bilo koju sliku da bude potpuno neprozirna ( vidljivo ), potpuno proziran ( skriven ), ili proziran (djelomično vidljiv). Numerička vrijednost je između 0 i 1. Gdje 0 definira potpuno prozirno, a 1 definira potpuno vidljivo. Vrijednosti neprozirnosti između 0 i 1, kao što su 0,2, 0,4, 0,6 itd., mijenjaju sliku iz prozirne u neprozirnu postupnim povećanjem decimalne vrijednosti.
Sintaksa
opacity :
Numerička vrijednost mora biti između 0 i 1 kako bi slika bila poluprozirna. Ako damo 1, slika će biti neprozirna, ako je numerička vrijednost 0, slika postaje potpuno prozirna.
Primjer 1 : U ovom primjeru koristit ćemo svojstvo neprozirnosti kako bismo element učinili prozirnim prilikom pomicanja miša preko elementa.
Glavni.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. Izlaz
Prijeđite mišem preko crvenog okvira za prikaz efekta prozirnosti ili neprozirnosti.
Prozirnost prijelaza u CSS-u
U CSS-u, a tranzicijska neprozirnost je svojstvo koje se koristi za glatku promjenu stanja neprozirnosti s jedne razine na drugo stanje. To znači da neprozirnost prijelaza mijenja stanje neprozirnog elementa u prozirno s definiranim vremenskim trajanjem. Prijelaz ima četiri svojstva: svojstvo-prijelaza, trajanje-prijelaza, funkcija-određivanja vremena prijelaza i odgoda-prijelaza, koja se koriste za izvođenje efekta neprozirnosti na slici. The tranzicija-trajanje je važno svojstvo za postupne ili iznenadne promjene koje odražavaju učinak neprozirnosti na element tijekom definiranog vremenskog trajanja u milisekundama ili sekundama.
Skraćeno svojstvo prijelaza je sljedeće:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Sintaksa za definiranje neprozirnosti prijelaza u CSS-u
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Prijelazno svojstvo
Slijede svojstva prijelaza koja se koriste za kontrolu učinaka prijelaza.
| Vrijednost | Opis |
|---|---|
| Prijelaz- vlasništvo | Koristi se za definiranje naziva CSS svojstva koje pokazuje efekt prijelaza na slike. |
| Prijelaz- trajanje | Koristi se za definiranje vremenskog razdoblja u sekundama ili milisekundama za prikaz efekta prijelaza. |
| Funkcija prijelaznog vremena | Koristi se za definiranje krivulje brzine na slici za prikaz efekta prijelaza. |
| Prijelaz - kašnjenje | Određuje hoće li se efekt prijelaza pokrenuti na elementu ili slici. |
Napomena: Dok postavljamo svojstvo prijelaza na sliku ili sadržaj, moramo definirati svojstvo trajanja prijelaza; u suprotnom, trajanje postaje 0 i neće pokazati nikakav učinak.
Potreba za neprozirnošću prijelaza u CSS-u
The neprozirnost je jednostavno CSS svojstvo koje se koristi za kontrolu prozirnosti slike postavljanjem raspona neprozirnosti od 0 do 1. Odražava statičnu ili iznenadnu promjenu na elementu kako bi se pokazao učinak neprozirnosti. Na primjer, ako želimo prikazati sliku kao prozirnu, moramo postaviti vrijednost neprozirnosti od 0 do 1. Nakon toga, odmah pokazuje učinak neprozirnosti umjesto da nam treba neko vrijeme. Stoga koristimo a tranzicijska neprozirnost u CSS-u koji kontrolira transparentnost elementa tijekom definiranog vremenskog razdoblja. Koristeći funkciju prijelaznog vremena u neprozirnosti prijelaza, možemo odrediti krivulju brzine elementa koji određuje efekt brze neprozirnosti na slici. Na taj način koristimo efekt neprozirnosti prijelaza kako bismo odražavali promjene u navedenom vremenskom razdoblju umjesto da se dogode odmah.
Primjer 2: U ovom primjeru koristit ćemo svojstvo neprozirnosti prijelaza koje odražava učinak neprozirnosti u određenom vremenskom trajanju umjesto odmah.
Datoteka1.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> Izlaz
