Manapság egyre inkább kialakul a weboldal tervezésigazi művészet. Ez nem csak egy bizonyos színű és méretű oldal eleme, a különböző stílusú betűtípusok és a tematikus rajzok. Annak érdekében, hogy a webhely másoktól eltérő legyen, felhívja a látogatók figyelmét és bizonyos elemekre irányítsa, hatalmas számú módszert és eszközt használnak. Közöttük van egy nagyon népszerű css tulajdonság - az átlátszóság. Ez a technika nagyon divatos és látványos, ezért gyakran használják. Átlátszóságot adhat a weboldal különböző objektumai számára - például szöveg, egy egész blokk vagy kép. Különféle módon érik el. Fontolja meg őket alább.
Az elem átlátszó beállításai
A fok beállítására szolgáló paramétereknéhány átlátszó elem. Ezeket a konkrét céloktól függően, valamint attól a böngészőtől függően használják, amelynek a kialakítását „testreszabják”. Ezek a következő tulajdonságokat tartalmazzák:
- átlátszatlanság;
- szűrő;
- PNG kép háttérként.
A css tulajdonság "átláthatóság" értékei megváltoznaka következőképpen: minél nagyobb a szám, annál alacsonyabb az elem átlátszóságának szintje. Az átlátszatlanság 0-ról 1-re, szűrőben - 10-ről 100-ra változik. Ez utóbbi az Interet Explorer böngészőhöz, és minden máshoz az opacitás tulajdonság.
Kép átlátszósága (változó)
Kezdjük azzal a lehetőséggel, mikor jelenik meg az átlátszóság, amikor az egér kurzorának elemére mutatunk.
Fontolja meg, hogyan állítsa be a kép átlátszóságát. A CSS két lehetőséget kínál. Ehhez közvetlenül a html-dokumentum kódban kell regisztrálnia, az alábbiak szerint:
- Adja meg a kép elérési útját.
- Meghatározzuk az átláthatóság lehetőségeit, amikor az egeret lebeg, és nem. Ehhez használja az onmouseover és onmouseout tulajdonságokat, amelyekben az átlátszatlanság és a szűrő értékeit írjuk elő.
Ugyanezek a jellemzők regisztrálhatók a css-dokumentumban, és a forráskódhoz csak egy linket kell hozzá tenni. Az eredmények ugyanazok lesznek.
A szöveg és az oldalblokkok átláthatósága
A szöveg vagy a blokk tekintetében (div átláthatóság),A css javasolja egy olyan lehetőség használatát, amely hasonló a kép átlátszóságának létrehozásához, vagyis használjon csatlakoztatott css fájlt, amelyben a szükséges paraméterek vannak beállítva. Mehet egyszerűbb módon. A div stílusblokk vagy p szövegstílusának beállításakor írja be a következő html kódot az onmouseover és onmouseout elemekhez. Mindkét lehetőség működik, és a kívánt eredményt adja.
Átlátszóság állandó
Egyes esetekben az objektum, a tervezési elem vagy a szöveg átlátszóságát folyamatosan be kell állítani. Ebben a helyzetben a megoldás még egyszerűbb, mint az egér felett lebegni.
A css elemhez az átlátszóság lesz beállítvaa következő kódot. A div stílusblokkban adja meg a háttér (például # ff8800), az átlátszóság (például 0,5) értékeit, valamint a szélességet és a párnázatot.
Egy képhez hozzáadjuk az átlátszatlanság és a szűrő értékeit a kódhoz, és megjelöljük a kép elérési útját is.
RGBA módszer
Más felhasználási esetek is vannak.Ennek a css tulajdonságnak az értéke: az átlátszóság bármilyen tervező elem háttér színére alkalmazható. Ehhez használja az RGBA módszert. Az első három betű a fő színeket (piros, egész, kék), az utolsó - alfa pedig az átláthatóság szintjét jelöli. Az RGBA formátum használatával előírjuk az átláthatóság fokát, jelezve azt az utolsó számjegyben. Például, így: háttér: rgba (240,2,33,0,4035).
következtetés
Tehát használja, miközben dolgozikA weboldal kialakítása egyszerű, de hatékony css „átláthatóság” tulajdonság, elemeit érdekesebbé és észrevehetőbbé teheti minimális erőfeszítéssel. A transzparenciajellemzők meghatározására ismertetett lehetőségek segítenek ebben.
