A CSS „megjelenítés” + „átlátszatlanság” tulajdonságainak átállítása

A Css Megjelenites Atlatszatlansag Tulajdonsagainak Atallitasa



A CSS-ben az átmenet a hozzáadott elem sebességének szabályozására szolgáló módszerre utal, miközben a CSS-tulajdonságokat alkalmazza rajta. Pontosabban, különféle átmeneteket hajthat végre, beleértve az oldalátmeneteket, képátmeneteket, szöveget és még sok mást. Megadhatja, hogy egy adott időtartam után milyen változtatásokat kell alkalmazni, szemben azzal, hogy a tulajdonságváltozások azonnal hatályba lépnek.

Ez a bejegyzés bemutatja az átmenet beállításának módját a CSS segítségével ' kijelző ” és „ átlátszatlanság ” Tulajdonságok.

Hogyan lehet átállítani a CSS „megjelenítési” és „átlátszatlansági” tulajdonságait?

CSS átálláshoz ' kijelző ” és „ átlátszatlanság ” tulajdonságokkal, először hozzon létre egy div tárolót a „

” elemet. Ezután nyissa meg a div tárolót, és adjon hozzá egy háttérképet a „ háttérkép ' ingatlan. Ezt követően állítsa be a „ átmenet ”, „ átlátszatlanság ” és egyéb szükséges tulajdonságok az Ön választása szerint.





1. lépés: Hozzon létre egy „div” tárolót

Kezdetben hozzon létre egy div tárolót a '

” tárolót, és adjon hozzá egy osztályattribútumot egy adott névvel. Ehhez az osztály nevét a következőképpen állítottuk be: tétel ”:



= 'fő tétel' > >

2. lépés: Állítsa be a „megjelenítés” tulajdonságot

Ezután nyissa meg a div tárolót az osztálynév használatával fő-tétel ” és állítsa be a „ kijelző ' ingatlan:



.fő-tétel {

kijelző : Blokk ;

}

Itt az értéke a „ kijelző ' tulajdonság a következőre van állítva: ' Blokk ” a képernyő teljes szélességének felvételéhez.





3. lépés: Háttérkép hozzáadása

Ezután alkalmazza a következő CSS-tulajdonságokat az elért div tárolón:

.fő-tétel {

magasság : 400 képpont ;

szélesség : 400 képpont ;

háttérkép : url ( tavaszi-virágok.jpg ) ;

átlátszatlanság : 0.1 ;

átmenet : átlátszatlanság 2s könnyedség be-ki ;

árrés : 30 képpont 50 képpont ;

}

A fent említett kódrészletben:



  • ' magasság ” és „ szélesség ” tulajdonságok határozzák meg a definiált elem méretét.
  • ' háttérkép ” A CSS tulajdonság egy kép beszúrására szolgál a „ url() ” funkciót az elem hátoldalán.
  • ' átlátszatlanság ” határozza meg az elem átlátszatlanságának szintjét. Az átlátszatlansági szint az átlátszósági szintet mutatja, ahol „ 1 '' az átláthatóság hiánya miatt, és a ' 0.5 ' nak-nek ' ötven% ” átláthatóság.
  • ' átmenet ” a CSS-ben lehetővé teszi a felhasználók számára, hogy egy adott időtartam alatt zökkenőmentesen módosítsák a tulajdonságértékeket.
  • ' árrés ” határozza meg az elem körüli meghatározott határon kívül eső teret.

Kimenet

4. lépés: Alkalmazza a „:hover” pszeudoválasztót

Most nyissa meg a div tárolót a „ :lebeg ” pszeudo választó, amely az elemek kijelölésére szolgál, amikor az egeret rájuk viszjük:

.fő-tétel : lebeg {

átlátszatlanság : 1 ;

}

Ezután állítsa be a „ átlátszatlanság ' a kiválasztott elemből mint ' 1 ” az átlátszóság eltávolításához.

Kimenet

Ez minden az átmeneti CSS „megjelenítés” és „átlátszatlanság” tulajdonságainak beállításáról szól.

Következtetés

Az átmenet „megjelenítés” és „átlátszatlanság” tulajdonságainak beállításához először hozzon létre egy div tárolót a

elem használatával. Ezután nyissa meg a div elemet, és állítsa be a „ kijelző ' mint ' Blokk ”. Ezt követően alkalmazza a többi CSS-tulajdonságot, beleértve a „ háttérkép ” kép beszúrásához a tárolóba, „átmenet”, „átlátszatlanság” és mások. Ez a bejegyzés bemutatta a CSS-sel történő átmenet beállításának módját ' kijelző ” és „ átlátszatlanság ” tulajdonságait.