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ö ' Tee aluksi div-säiliö '' Siirry seuraavaksi div-säilöön käyttämällä luokan nimeä ' päätuote ' ja aseta ' näyttö ”omaisuus: Tässä arvo näyttö ' omaisuus on asetettu ' lohko ' ottaakseen koko näytön leveyden. Käytä seuraavaksi seuraavia CSS-ominaisuuksia avatussa div-säilössä: Yllä mainitussa koodinpätkässä: Lähtö Siirry nyt div-säiliöön ' :hover ” pseudovalitsin, jota käytetään elementtien valitsemiseen, kun viemme hiiren niiden päälle: 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. Määritä siirtymäominaisuudet 'näyttö' ja 'opasiteetti' tekemällä ensin div-säiliö
Vaihe 1: Luo 'div'-säilö
Vaihe 2: Aseta 'näyttö'-ominaisuus
.main-ite {
näyttö : lohko ;
}
Vaihe 3: Lisää taustakuva
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ä ;
}
Vaihe 4: Käytä ':hover' pseudovalitsinta
opasiteetti : 1 ;
}
Johtopäätös