Kaip pakeisti CSS ekrano ir neskaidrumo ypatybes

Kaip Pakeisti Css Ekrano Ir Neskaidrumo Ypatybes



CSS sistemoje perėjimas reiškia pridėto elemento greičio valdymo metodą, kai jam taikomos CSS savybės. Tiksliau, galite atlikti įvairius perėjimus, įskaitant puslapio perėjimus, vaizdo perėjimus, tekstą ir daug daugiau. Galite nurodyti pakeitimus, kurie turi būti taikomi praėjus tam tikram laikotarpiui, o ne tai, kad nuosavybės pakeitimai įsigaliotų iš karto.

Šiame įraše paaiškinamas perėjimo nustatymo metodas naudojant CSS ' ekranas “ ir „ neskaidrumas “ Savybės.

Kaip pakeisti CSS „vaizdo“ ir „nepermatomumo“ ypatybes?

Norėdami perkelti CSS “ ekranas “ ir „ neskaidrumas “ ypatybes, pirmiausia sukurkite „div“ konteinerį su „

“ elementas. Tada eikite į div konteinerį ir pridėkite fono vaizdą naudodami „ fono vaizdas ' nuosavybė. Po to nustatykite „ perėjimas “, „ neskaidrumas “ ir kitos reikalingos savybės pagal jūsų pasirinkimą.





1 veiksmas: sukurkite „div“ konteinerį

Iš pradžių sukurkite „div“ konteinerį naudodami „

“ konteinerį ir pridėkite klasės atributą konkrečiu pavadinimu. Norėdami tai padaryti, mes nustatėme klasės pavadinimą kaip ' daiktas “:



= 'pagrindinis daiktas' > >

2 veiksmas: nustatykite „vaizdo“ ypatybę

Tada pasiekite div konteinerį naudodami klasės pavadinimą ' pagrindinis daiktas “ ir nustatykite „ ekranas ' nuosavybė:



.pagrindinis elementas {

ekranas : blokas ;

}

Čia vertė „ ekranas 'ypatybė nustatyta kaip ' blokas “, kad užimtų visą ekrano plotį.



3 veiksmas: pridėkite foninį vaizdą

Tada taikykite šias CSS ypatybes pasiekiamame div konteineryje:

.pagrindinis elementas {

aukščio : 400 piks ;

plotis : 400 piks ;

fono vaizdas : url ( pavasario-gėlės.jpg ) ;

neskaidrumas : 0.1 ;

perėjimas : neskaidrumas 2s lengvumas į išorę ;

marža : 30 piks 50 piks ;

}

Aukščiau nurodytame kodo fragmente:



  • “ aukščio “ ir „ plotis ” savybės lemia apibrėžto elemento dydį.
  • “ fono vaizdas ' CSS ypatybė naudojama įterpiant vaizdą naudojant ' url() “ funkcija elemento gale.
  • “ neskaidrumas “ nustato elemento neskaidrumo lygį. Nepermatomumo lygis parodo skaidrumo lygį, kur „ 1 “ naudojamas dėl skaidrumo ir „ 0.5 “ skirta „ penkiasdešimt % “ skaidrumas.
  • “ perėjimas “ CSS leidžia vartotojams sklandžiai keisti nuosavybės vertes per tam tikrą laiką.
  • “ marža “ apibrėžia erdvę, esančią už apibrėžtos ribos aplink elementą.

Išvestis

4 veiksmas: taikykite „:hover“ pseudo parinkiklį

Dabar pasiekite div konteinerį palei „ :užveskite pelės žymeklį “ pseudo parinkiklis, kuris naudojamas elementams pasirinkti, kai užvedame pelės žymeklį ant jų:

.pagrindinis elementas : užveskite pelės žymeklį {

neskaidrumas : 1 ;

}

Tada nustatykite „ neskaidrumas “ iš pasirinkto elemento kaip „ 1 “, kad pašalintumėte skaidrumą.

Išvestis

Tai viskas apie pereinamojo CSS „vaizdo“ ir „nepermatomumo“ savybių nustatymą.

Išvada

Norėdami nustatyti perėjimo „display“ ir „nepermatomumo“ ypatybes, pirmiausia sukurkite „div“ konteinerį naudodami elementą

. Tada eikite į div elementą ir nustatykite „ ekranas “ kaip „ blokas “. Po to pritaikykite kitas CSS ypatybes, įskaitant „ fono vaizdas “ norėdami įterpti vaizdą į konteinerį, „perėjimas“, „nepermatomumas“ ir kt. Šiame įraše paaiškintas perėjimo su CSS nustatymo metodas. ekranas “ ir „ neskaidrumas “ savybes.

Kita

Kategorija

Populiarios Temos

Kaip pridėti vietoje priglobtą kodą prie „GitHub“?

Kaip pridėti tarpą tarp stulpelių nepaveikiant eilučių HTML lentelėje?

Kaip ištaisyti DLL klaidas arba trūkstamų DLL failų problemas „Windows 10“ ir „11“

Kaip sukurti BCD į 7 segmentų ekrano dekoderį

Kaip įdiegti „VMware Workstation 17 Pro“ Ubuntu 22.04 LTS

Didžiausia „Arduino Nano“ įtampa

Kokie yra geriausi AI rašymo padėjėjai?

Kaip įdiegti ir naudoti „Ansible“ sistemoje „Windows 11“.

5 neveikiančios ausinių mikrofono problemos

Oracle sukurti temp lentelę

Kaip dinamiškai rašyti HTML kodą naudojant „JavaScript“.

Kaip gauti užklausos eilutės reikšmes „JavaScript“.

Ar „Turnitin“ gali aptikti „ChatGPT“.

„PowerShell“ naudojimas tekstiniams failams skaityti ir tekstui pakeisti

Kas yra geras komandų eilutės skaičiuotuvas „Linux Mint 21“.

Kaip iš naujo įkelti „div“ iš naujo neįkeliant viso „jQuery“ puslapio

Kas yra EOF C programavimo kalboje

Induktoriai serijinėse ir serijinėse induktorių grandinėse

Kaip nustatyti greitą Node.js Sass/SCSS projektą?

Kaip išspręsti „FileNotFoundException“ problemą „Java.io“.