Peittävyys CSS:ssä on ominaisuus, joka määrittää elementtien, kuten esim sisältö tai kuvia . Tämän ominaisuuden avulla voimme asettaa kaikki kuvat täysin läpinäkymättömiksi ( näkyvissä ), täysin läpinäkyvä ( piilotettu ) tai läpikuultava (osittain näkyvissä). Sen numeerinen arvo on välillä 0 ja 1. Missä 0 määrittelee täysin läpinäkyvän ja 1 määrittelee täysin näkyvän. Läpinäkyvyysarvot välillä 0 ja 1, kuten 0,2, 0,4, 0,6 jne., muuttavat kuvan läpinäkyvästä läpinäkymättömäksi lisäämällä asteittain desimaaliarvoa.
Syntaksi
opacity :
Numeerisen arvon on oltava välillä 0 ja 1, jotta kuvasta tulee puoliksi läpinäkyvä. Jos annamme 1, kuva on läpinäkymätön, jos numeerinen arvo on 0, kuvasta tulee täysin läpinäkyvä.
Esimerkki 1 : Tässä esimerkissä käytämme opacity-ominaisuutta tehdäksemme elementistä läpinäkyvän, kun hiirtä siirretään elementin päälle.
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. Lähtö
Vie hiiri punaisen laatikon päälle näyttääksesi läpinäkyvän tai peittävän tehosteen.
Siirtymäopasiteetti CSS:ssä
CSS:ssä a siirtymän läpinäkyvyys on ominaisuus, jota käytetään opasiteettitilan sujuvaan vaihtamiseen tasolta toiselle. Se tarkoittaa, että siirtymäopasiteetti muuttaa läpinäkymättömän elementin tilan läpinäkyväksi tietyn ajan kuluessa. Siirtymällä on neljä ominaisuutta: siirtymän ominaisuus , siirtymän kesto , siirtymän ajoituksen toiminto ja siirtymän viive , joita käytetään kuvan peittävyysvaikutuksen tekemiseen. The siirtymäaika on tärkeä ominaisuus asteittaisille tai äkillisille muutoksille, jotka heijastavat elementin läpinäkyvyysvaikutusta tietyn ajan millisekunteina tai sekunteina.
Lyhyesti siirtymän ominaisuus on seuraava:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Syntaksi siirtymän läpinäkyvyyden määrittämiseksi CSS:ssä
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Siirtymäominaisuus
Seuraavat ovat siirtymäominaisuudet, joita käytetään siirtymätehosteiden ohjaamiseen.
| Arvo | Kuvaus |
|---|---|
| Siirtymä-omaisuus | Sitä käytetään määrittämään kuviin siirtymätehosteen näyttävän CSS-ominaisuuden nimi. |
| Siirtymäaika | Sitä käytetään määrittämään ajanjakso sekunteina tai millisekunteina siirtymätehosteen näyttämiseksi. |
| Siirtymä-ajoitus-toiminto | Sitä käytetään määrittämään kuvan nopeuskäyrä siirtymätehosteen näyttämiseksi. |
| Siirtymä - viive | Määrittää, käynnistetäänkö siirtymätehoste elementissä vai kuvassa. |
Huomautus: Kun asetamme kuvalle tai sisällölle siirtymäominaisuuden, meidän on määritettävä siirtymäkesto-ominaisuus; muussa tapauksessa kestosta tulee 0, eikä se näytä mitään vaikutusta.
Siirtymän läpinäkyvyyden tarve CSS:ssä
The opasiteetti on yksinkertainen CSS-ominaisuus, jota käytetään kuvan läpinäkyvyyden säätämiseen asettamalla peittävyysalue 0–1. Se heijastaa elementin staattista tai äkillistä muutosta, joka näyttää opasiteettivaikutuksen. Jos esimerkiksi haluamme näyttää kuvan läpinäkyvänä, meidän on asetettava opasiteettiarvo 0:sta 1:een. Sen jälkeen se näyttää läpikuultamattomuusefektin välittömästi sen sijaan, että se vie aikaa. Siksi käytämme a siirtymän läpinäkyvyys CSS:ssä, joka ohjaa elementin läpinäkyvyyttä tietyn ajanjakson aikana. Käyttämällä siirtymäaikafunktiota siirtymäopasiteetissa voimme määrittää elementin nopeuskäyrän, joka määrittää kuvan nopean opasiteettivaikutuksen. Tällä tavalla käytämme siirtymän läpinäkyvyysvaikutusta heijastamaan muutoksia määritetyllä ajanjaksolla sen sijaan, että ne tapahtuisivat välittömästi.
Esimerkki 2: Tässä esimerkissä aiomme käyttää siirtymäopasiteettiominaisuutta, joka heijastaa läpinäkyvyysvaikutusta tietyn ajan kuluessa välittömän sijasta.
Tiedosto1.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> Lähtö
