Fedettség (átlátszóság)
opacity: érték;
Az érték 0 és 1 között lehet.
- 1 - teljesen eltakarja (fedett) az alatta lévő területet a tartalom
- 0.5 - a háttérben lévő tartalom 50%-ban átlátszik
- 0 - a háttérben lévő tag tartalma 100%-ig átlátszik.
Háttér beállítása
Valamennyi HTML tagnek állíthatjuk a háttérszínét és a háttér egyéb tulajdonságait.Alapesetben a háttér teljesen átlátszó, vaghyis a fedettség értéke: 0;
Background-color: szín;
Korábban volt szó róla. Segítségével beállítható a háttér színe többféle módon...
Background-image: url(érvényes elérési útvonal);
Background-repeat: ismétlődés iránya;
A paranccsal előírhatjuk, hogy a háttérnek beállított kép milyen irányban ismétlődjön vagy ne ismétlődjön.
- background-repeat:repeat; - függőlegesen és vízszintesen is ismétlődik a kép
- background-repeat:repeat-x; - vízszintesen ismétlődik a kép
- background-repeat:repeat-y; - függőlegesen ismétlődik a kép
- background-repeat:no-repeat; - nem ismétlődik a kép
- background-repeat:inherit; - örökölt érték
Background position: irány;
Használható kulcsszavak:
- left top: bal oldalon fent
- left center: bal oldalon középen
- left bottom: bal oldalon lent
- right top: jobb oldalon fent
- right center: jobb oldalon középen
- right bottom: jobb oldalon lent
- center top: vízszintesen középen fent
- center center: vízszintesen és függőlegesen is középen
- center bottom: vízszintesen középen lent
Background-attachement: kulcsszó;
Segítségével beállíthatjuk, hogy a háttérkép az oldal görgetése esetén az oldallal együtt mozogjon vagy ugyanott maradjon.
- scroll: a háttérkép görgetésnél az oldal tartalmával együtt mozog
- fixed: a háttérkép mindig egy helyben marad
Background-origin: kulcsszó;
- border-box: a szegély külső széléhez történik a viszonyítás.
- padding-box: a belső margó külső széléhez történik a viszonyítás.
- content-box: a tartalomterület külső széléhez történik a viszonyítás.
Background-clip: kulcsszó;
Segítségével megadhatjuk, hogy a háttérkép vagy háttérkép egy doboz melyik területén helyezkedjen el.
- border-box: a háttér területe a szegély területét és magában foglalja. Alapértelmezett érték.
- padding-box: a háttér területe a tartalom-doboz és a belső margó területét foglalja magában.
- content-box: a háttér területe csak a tartalom-doboz területét foglalja magában.
Background-size: méret | kulcsszó;
Megadhatjuk, hogy a háttérkép milyen méretben jelenjen meg az oldalon
- Méret megadásával, a szokásos mértékegységek felhasználásával
- contain: a háttérkép mérete, a képarány megtartása mellet úgy változik, hogy lefedje a rendelkezésre álló területet. Egyik irányban túlnyúlhat.
- cover a háttérkép mérete, a képarány megtartása mellet úgy változik, hogy egyik irányban kitöltse a rendelkezésre álló területet. A másik irányban üres terület maradhat.
linear-gradient(irány, forrás színe, cél színe)
Segítségével átmenetes háttereket lehet kialakítani a forrás és a cél színe között
az irány lehet:
- left: balról jobbra
- right: jobbról balra
- top: fentről lefelé
- bottom: lentről felfelé
- top left: bal felső sarokból, a jobb alsó felé
- top right: jobb felső sarokból, a bal alsó felé
- bottom left: bal alsó sarokból, a jobb felső felé
- bottom right: jobb alsó sarokból, a bal felső felé
repeating-linear-gradient(pozíció és irány, szín1 pozíció, szín2 pozíció, .... színN pozicíció);
Több szín is használható lineáris átmenetként Ha a közbenső értékekhez nem rendelünk pozíciót, akkor arányosan lesznek elhelyezve az átmenetek. (Pl. A harmadik középre kerül.)
Megadhatjuk az egyes színek gradiens-vonalon elfoglalt helyzetét hosszértékkel, vagy százalékban. Így az egyes részátmenetek tetszőlegesen pozicionálhatók.
radial-gradient(pozíció, határvonal, méret);
Egy kör vagy ellipszis alakú színátmenetet lehet meghatározni. Az átmenet kezdőpontja az első szín, a határvonala a második szín,
- pozíció: ugyanaz, mint a background-position értékek. Ha nincsen megadva, akkor közép.
- Határvonal: értéke lehet: circle - kör, vagy ellipse - ellipszis alakú. alapértelmezés: ellipse;
- méret: A kör és az ellipszis esetén is megadható az alábbi módon:
- closest-side - A határvonal érinti a legközelebbi doboz oldalat (kör esetén), vagy mind a két oldalt (ellipszis esetén).
- closest-corner - A határvonal érinti a legközelebbi sarkot.
- farthest-side - A határvonal érinti a legtávolabbi doboz oldalat (kör esetén), vagy mind a két oldalt (ellipszis esetén).
- farthest-corner - Alapértelmezett. A legtávolabbi sarkot érinti az átmenet határvonala.
- Ha a határvonal alak kör, akkor a a méretnél sugarat is meg lehet adni szokásos mértékegységekkel;
- Ha a határvonal alak ellipszis, akkor két értéket lehet megadni az ellipszis két sugarának a szoksásios mértékegységekkel (vízszintes sugár, függőleges sugár sorrendben)
A színek és a hozzájuk tartozó számértékek a közbeeső átmenetek színei és a távolságuk %-ban vagy pixelben
Megjegyzés:
Mivel ez a beállítás színeket határoz meg, ezért a background-color vagy a color: CSS beállításokná lehet hazsnálni a színátmenetek definiálására.
Példák az átmenetekre!
- background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
- background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
- background: radial-gradient(ellipse at top, #e66465, transparent), radial-gradient(ellipse at bottom, #4d9f0c, transparent);
Részletesebb leírást itt lehet találni: https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()