CSS-näytön ja peittävyyden ominaisuuksien siirtäminen

Css Nayton Ja Peittavyyden Ominaisuuksien Siirtaminen



CSS:ssä siirtyminen viittaa menetelmään, jolla ohjataan lisätyn elementin nopeutta samalla kun siihen sovelletaan CSS-ominaisuuksia. Tarkemmin sanottuna voit suorittaa erilaisia ​​siirtymiä, mukaan lukien sivusiirtymät, kuvasiirrot, teksti ja paljon muuta. Voit määrittää muutokset, jotka otetaan käyttöön tietyn ajanjakson jälkeen, sen sijaan, että ominaisuusmuutokset tulevat voimaan välittömästi.

Tämä viesti selittää menetelmän siirtymän asettamiseen CSS: n avulla ' näyttö ' ja ' opasiteetti ”Ominaisuudet.

Kuinka siirtää CSS-näytön ja peittävyyden ominaisuuksia?

CSS:n siirto' näyttö ' ja ' opasiteetti '-ominaisuudet, tee ensin div-säiliö '

”elementtiä. Siirry sitten div-säiliöön ja lisää taustakuva ' taustakuva ” omaisuutta. Aseta sen jälkeen ' siirtyminen ”, “ opasiteetti ”, ja muut tarvittavat ominaisuudet valintasi mukaan.







Vaihe 1: Luo 'div'-säilö

Tee aluksi div-säiliö ''

”-kontti ja lisää luokkaattribuutti tietyllä nimellä. Tätä varten olemme asettanut luokan nimeksi ' kohde ':



= 'päätuote' > >

Vaihe 2: Aseta 'näyttö'-ominaisuus

Siirry seuraavaksi div-säilöön käyttämällä luokan nimeä ' päätuote ' ja aseta ' näyttö ”omaisuus:



.main-ite {

näyttö : lohko ;

}

Tässä arvo näyttö ' omaisuus on asetettu ' lohko ' ottaakseen koko näytön leveyden.





Vaihe 3: Lisää taustakuva

Käytä seuraavaksi seuraavia CSS-ominaisuuksia avatussa div-säilössä:

.main-ite {

korkeus : 400 pikseliä ;

leveys : 400 pikseliä ;

taustakuva : url ( kevät-kukat.jpg ) ;

opasiteetti : 0.1 ;

siirtyminen : opasiteetti 2s helppous sisään-ulos ;

marginaali : 30 kuvapistettä 50 pikseliä ;

}

Yllä mainitussa koodinpätkässä:



  • ' korkeus ' ja ' leveys ”-ominaisuudet määrittävät määritellyn elementin koon.
  • ' taustakuva ” CSS-ominaisuutta käytetään kuvan lisäämiseen ” url() ”-toiminto elementin takana.
  • ' opasiteetti ” määrittää elementin peittävyystason. Läpinäkyvyystaso osoittaa läpinäkyvyystason, jossa ' 1 ' käytetään ilman läpinäkyvyyttä, ja ' 0.5 ' on tarkoitettu ' viisikymmentä% ”läpinäkyvyys.
  • ' siirtyminen ” CSS:ssä sallii käyttäjien muuttaa ominaisuusarvoja sujuvasti tietyn ajan kuluessa.
  • ' marginaali ” määrittelee tilan määritetyn rajan ulkopuolella elementin ympärillä.

Lähtö

Vaihe 4: Käytä ':hover' pseudovalitsinta

Siirry nyt div-säiliöön ' :hover ” pseudovalitsin, jota käytetään elementtien valitsemiseen, kun viemme hiiren niiden päälle:

.main-ite : leijuu {

opasiteetti : 1 ;

}

Aseta sitten ' opasiteetti ' valitusta elementistä nimellä ' 1 ” poistaaksesi läpinäkyvyyden.

Lähtö

Siinä on kyse siirtymä-CSS:n 'näyttö'- ja 'opasiteetti'-ominaisuuksien asettamisesta.

Johtopäätös

Määritä siirtymäominaisuudet 'näyttö' ja 'opasiteetti' tekemällä ensin div-säiliö

-elementin avulla. Siirry seuraavaksi div-elementtiin ja aseta ' näyttö ' kuten ' lohko ”. Käytä sen jälkeen muita CSS-ominaisuuksia, mukaan lukien ' taustakuva ' lisätäksesi kuvan säilöön, 'siirtymä', 'opasiteetti' ja muut. Tämä viesti selitti menetelmän siirtymän asettamiseen CSS: llä ' näyttö ' ja ' opasiteetti ” ominaisuuksia.