Kuidas CSS-i 'kuva' + 'läbipaistmatuse' atribuute üle viia

Kuidas Css I Kuva Labipaistmatuse Atribuute Ule Viia



CSS-is viitab üleminek meetodile lisatud elemendi kiiruse juhtimiseks, rakendades samal ajal sellele CSS-i atribuute. Täpsemalt saate teostada erinevaid üleminekuid, sealhulgas lehekülje siirdeid, kujutiste üleminekuid, teksti ja palju muud. Saate määrata muudatused, mida rakendatakse pärast teatud ajaperioodi, mitte aga atribuudimuudatuste kohest jõustumist.

See postitus selgitab ülemineku määramise meetodit CSS-i abil ' kuva ” ja „ läbipaistmatus ” Omadused.

Kuidas CSS-i 'kuva' ja 'läbipaistmatuse' atribuute üle viia?

CSS-i üleminekuks ' kuva ” ja „ läbipaistmatus ' atribuudid, tehke esmalt div konteiner koos '

” element. Seejärel avage div-konteiner ja lisage taustpilt, kasutades ' taustapilt ” vara. Pärast seda määrake ' üleminek ”, „ läbipaistmatus ” ja muud vajalikud omadused vastavalt teie valikule.





1. samm: looge 'div' konteiner

Esialgu looge div konteiner, kasutades '

” konteiner ja lisage kindla nimega klassiatribuut. Selleks oleme määranud klassi nimeks ' üksus ”:



= 'põhiartikkel' > >

2. samm: määrake atribuut 'kuva'.

Järgmisena avage div-konteiner, kasutades klassi nime ' põhielement ” ja määrake „ kuva ” vara:



.pea-element {

kuva : blokk ;

}

Siin on „ kuva ' atribuut on määratud kui ' blokk ” kogu ekraanilaiuse hõivamiseks.



3. samm: lisage taustpilt

Järgmisena rakendage juurdepääsetavale div konteinerile järgmised CSS-i atribuudid:

.pea-element {

kõrgus : 400 pikslit ;

laius : 400 pikslit ;

taustapilt : url ( kevadlilled.jpg ) ;

läbipaistmatus : 0.1 ;

üleminek : läbipaistmatus 2s kergus sisse-välja ;

marginaal : 30 pikslit 50 pikslit ;

}

Ülaltoodud koodilõigul:



  • “ kõrgus ” ja „ laius ” omadused määravad määratletud elemendi suuruse.
  • “ taustapilt ” CSS-i atribuuti kasutatakse pildi sisestamiseks „“ abil url() ” funktsioon elemendi tagaküljel.
  • “ läbipaistmatus ” määrab elemendi läbipaistmatuse taseme. Läbipaistmatuse tase näitab läbipaistvuse taset, kus ' 1 ' kasutatakse läbipaistvuse puudumiseks ja ' 0.5 ' on jaoks ' viiskümmend% ” läbipaistvus.
  • “ üleminek ” CSS-is võimaldab kasutajatel atribuutide väärtusi teatud aja jooksul sujuvalt muuta.
  • “ marginaal ” määratleb ruumi väljaspool määratletud piiri elemendi ümber.

Väljund

4. samm: rakendage pseudovalijat ':hover'.

Nüüd avage div-konteiner mööda ' :hõljuma ” pseudovalija, mida kasutatakse elementide valimiseks, kui hõljutame kursorit nende kohal:

.pea-element : hõljuma {

läbipaistmatus : 1 ;

}

Seejärel määrake ' läbipaistmatus ' valitud elemendist kui ' 1 läbipaistvuse eemaldamiseks.

Väljund

See kõik puudutab ülemineku CSS-i 'kuva' ja 'läbipaistmatuse' atribuutide määramist.

Järeldus

Ülemineku atribuutide 'kuva' ja 'läbipaistmatus' määramiseks looge esmalt elemendi

abil div konteiner. Järgmisena avage div element ja määrake ' kuva ” kui „ blokk ”. Pärast seda rakendage teisi CSS-i atribuute, sealhulgas ' taustapilt ”, et sisestada konteinerisse kujutis, „üleminek”, „läbipaistmatus” ja muud. See postitus selgitas CSS-iga ülemineku seadistamise meetodit ' kuva ” ja „ läbipaistmatus ” omadused.

muud

Kategooria

Lemmik Postitused

Kuidas installitud pakette uuesti konfigureerida Debian 11-s

Kuidas kasutada kirjelduste loendit HTML-is?

Pipe Commandi kasutamine – Raspberry Pi Linux

Kuidas kontrollida faili suurust Linuxis

Kuidas LangChainis retriivereid kasutada?

Kuidas saata e-kirju Linuxi käsurea abil

Kuidas kasutada käsku Move-ItemProperty üksuse atribuudi teisaldamiseks PowerShellis?

Kuidas majutada veebisaiti AWS-is, kasutades LAMP-i

Mis on C++ STL-konteinerid

Kuidas JavaScriptis vasakpoolset kärpimist ja paremat kärpimistringi

Androidi nutitelefonide ja tahvelarvutite ekraani poolitamine

TypeError: object.forEach ei ole JavaScriptis funktsioon

SQL XOR operaator

Kuidas teisendada stringi märgimassiiviks Arduinos, kasutades funktsiooni toCharArray

Funktsiooni tüüpide määramine TypeScriptis

Vector Erase() funktsioon C++ keeles

Parimad kleepuvate märkmete rakendused Linux Mint 21 jaoks

Unaarne operaator keeles C++

Kuidas teha oma avatari tüdrukuks või poisiks

Mis on AWS VPC alamvõrk ja kuidas seda kasutada?