A CSS a Cascading Style Sheets rövidítése. Ez egy egyszerű, mégis hatékony tervezési nyelv, amely képes átalakítani a weboldalakat. Egyszerűbben fogalmazva, egyszerűsíti a weboldalak reprezentatívvá tételét és a felhasználók számára vonzóvá tételét a . Ebben a cikkben megértjük, hogyan lehet különféle háttérképeket megvalósítani a CSS-ben a következő sorrendben:
- Háttérkép a CSS tulajdonságai között
- Háttérkép a CSS-ben
- Ismételje meg a hátteret
- Háttér-melléklet
- Háttér pozíció
- Háttérkép CSS méretben
- Háttérszín
Háttérkép a CSS tulajdonságai között
Számos tulajdonság használható a kép viselkedésének és helyzetének szabályozására. Ezek a tulajdonságok:
- háttérkép
- háttérismétlés
- háttér-kötődés
- háttér-helyzet
- háttérméret
- háttérszín
Megismerjük ezeket a tulajdonságokat, és érdekes bemutatóval megnézzük, mikor és hogyan kell használni őket.
fordítsa az objektumot tömb php-be
Háttérkép a CSS-ben
Az háttérkép tulajdonság, amint azt a neve is sugallja, egyszerűen a háttérkép jelzésére és beállítására szolgál a weboldal egyik elemén keresztül. Alapértelmezés szerint egy háttérkép kerül az elem bal felső sarkába.
szintaxis: háttérkép: url | nincs | lineáris gradiens | radiális gradiens
törzs {háttérkép: url ('apple.jpg')}háttér URL használatával
Értsük meg a paramétereket:
- URL: Ennek a paraméternek a segítségével megadhatjuk a fájl elérési útját bármelyik képhez, vagy a kép URL-jét, amelyet háttérként kell beállítani. Több kép deklarálásához az URL-eket vesszőhatároló választja el.
törzs {háttérkép: url ('apple.jpg')} 
- egyik sem: Ez a tulajdonság alapértelmezett értéke, és ha annak értéke meg van adva, akkor a háttérkép nem jelenik meg.
törzs {háttér: nincs}- lineáris gradiens (): A háttérkép lineáris színátmenetre van állítva. Legalább két színt kell megadni ehhez a tulajdonsághoz, azaz felülről lefelé.
törzs {háttér-szín: # 001 háttérkép: lineáris színátmenet (fehér 15%, átlátszó 16%), lineáris színátmenet (fehér 15%, átlátszó 16%) háttérméret: 60px 60px háttér-helyzet: 0 0, 30px 30px}- sugárirányú gradiens (): A háttérkép radiális színátmenetre van állítva. Legalább legalább két színt meg kell adni ehhez a tulajdonsághoz, azaz a középponttól a szélekig.
törzs {háttér-szín: # 001 háttérkép: radiális színátmenet (fehér 15%, átlátszó 16%), sugárirányú gradiens (fehér 15%, átlátszó 16%) háttérméret: 60px 60px háttér-helyzet: 0 0, 30px 30px}- ismétlődő-lineáris-gradiens (): Lineáris gradienst ismétel. Használjuk ugyanazt a példát, amelyet fentebb láttunk a lineáris gradiensben az ismétlődő-lineáris-gradiens esetében, és nézzük meg a különbséget.
törzs {háttér-szín: # 001 háttérkép: ismétlődő-lineáris-színátmenet (fehér 15%, átlátszó 16%), ismétlődő-lineáris-színátmenet (fehér 15%, átlátszó 16%) háttérméret: 60px 60px háttérpozíció : 0 0, 30 képpont 30 képpont}- ismétlődő sugárirányú gradiens (): Megismétli a sugárirányú gradienst. Fedezzük fel ugyanazt a példát, amelyet fentebb használtunk sugárirányú gradiensben.
törzs {háttér-szín: # 001 háttérkép: ismétlődő sugárgradiens (fehér 15%, átlátszó 16%), ismétlődő radiális gradiens (fehér 15%, átlátszó 16%) háttérméret: 60px 60px háttérpozíció : 0 0, 30 képpont 30 képpont}Tartalék háttér
Szakmai tippként mindig tanácsos háttérszínt adni tartalékként. Különösen akkor jön a megmentés, ha vagy a háttérképek nem töltődnek be, vagy az általunk beállított gradiens háttér nem támogatott néhány régi böngészőben, amelyen megtekintették.
Ez nem rontja a felhasználói élményt, és így deklarálható:
body {háttér: url (apple_lost.jpg) rózsaszín}Több háttér
Lehetőségünk van több háttérkép beállítására is, és ez a legtöbb esetben szükséges, például előtér és háttérkép. A kép sorrendje itt fontos, először azt a képet deklarálják, amelynek elöl kellene lennie, és legközelebb azt a képet kell kijelölni, amelynek hátul kellene lennie.
Az alábbiakban példa több háttérképre:
body {háttérkép: url ('small-heart.jpg'), url ('background.jpg')}Ismételje meg a hátteret
A háttérismétlő tulajdonság a háttérképpel együtt használható a kép ismétlődési viselkedésének meghatározására. Megadja, hogy a háttérkép megismétlődik-e és hogyan. A háttérkép alapértelmezés szerint függőlegesen és vízszintesen is megismétlődik.
A lehetséges értékek:
- ismétlés - A kép vízszintesen és függőlegesen is megismétlődik
- no-repeat - A kép nem ismétlődik
- ismétlés-x - A kép vízszintesen ismétlődik
- ismétlés-y - A kép függőlegesen ismétlődik
- szóköz- A kép megismétlődik egyenletes szóközökkel vagy hézagokkal.
- kerek - A képet megismételjük, hogy kitöltsük a területet, anélkül, hogy rések lennének közöttük.
A háttérismétlő tulajdonság CSS-szintaxisa:
háttérismétlés: ismétlés | ismétlés-x | ismétlés-y | nem ismétlés | szóköz | kerek
body {háttérkép: url ('heart.png'), url ('background.png') háttérismétlés: ismétlés-y, ismétlés-x háttérszín: #ffffff}Háttér-melléklet
Az háttér-kötődés tulajdonságot a háttérképpel együtt használják annak megadására, hogy a képnek gördülnie kell-e a tartalom görgetésekor. Jelzi, hogy a háttérképet rögzíteni kell, vagy görgetnie kell a dokumentummal a böngésző ablak nézetéhez képest. Az alapértelmezett érték a görgetés.
A lehetséges értékek:
- görgetés - A kép az oldallal együtt görget.
- fix - A kép nem gördül az oldallal együtt
A háttér-melléklet CSS-szintaxisa:
háttér-melléklet: görgetés | fix
body {háttérkép: url ('heart.png'), url ('background.png') háttérismétlés: szóköz, kerek}Háttér pozíció
Az háttér-helyzet tulajdonság a háttérkép helyének vagy helyzetének jelölésére szolgál. A lehetséges értékek:
- tetejére
- jobb
- alsó
- bal
- központ
- ezen értékek kombinációja (pl. bal felső)
A háttérpozíció CSS-szintaxisa:
háttér-helyzet: fent | jobb | bal | alul | középen
body {háttérkép: url ('heart.png') háttérismétlés: no-repeat háttérmelléklet: görgetés}Háttérkép CSS méretben
Ez a tulajdonság az egyik leghasznosabb, mivel lehetővé teszi számunkra a háttérkép méretének szabályozását. Különböző kombinációkat alkalmazhatunk ezzel a tulajdonsággal, és ennek megfelelően érhetünk el eredményeket. Az alapértelmezett érték az auto.
A következő értékek használhatók háttérmérettel:
- auto
- a kép hossza - magassága és szélessége pl. 20px 40px.
- egy százalék- a kép magassága és szélessége, mint százalékos w.r.t szülő elem pl. 50% 50%.
- közép- Igazítsa a képet középre
- lefedés, a kép méretezése úgy, hogy teljesen eltakarja a háttér területét.
- tartalmazzák, méretezve a képet a tényleges magasságig és szélességig.
A háttérpozíció CSS-szintaxisa:
háttérméret: érték
body {háttérkép: url ('heart.png'), url ('background.png') háttérismétlés: nem ismétlés, ismétlés háttérméret: 400px 150px, borító}body {háttérkép: url ('heart.png'), url ('background.png') háttérismétlés: nem ismétlés, ismétlés háttérméret: tartalmaz, 400px 150px}Háttérszín
Ez a CSS összes tulajdonságának legegyszerűbb. Egyszínű színeket alkalmaz az oldal hátterére. Ennek a tulajdonságnak az értéke megadható színekben (pl. Piros, kék stb.), Hexa értékben és RGB értékben.
A háttérszín CSS szintaxisa:
háttérszín: érték
body {háttérkép: url (small-heart.jpg) háttérszín: # 22a8e3}Ezzel befejeződik az összes tulajdonság, amelyet a háttérrel használhatunk. Mindig kipróbálhatjuk a tulajdonságok különböző kombinációit, amint azt a bemutatónkon láttuk.
A CSS elengedhetetlen, és minden front-end webfejlesztő számára készségeket kell elsajátítania. Segít a háttér megtervezésében és stílusában, valamint lenyűgöző weboldalak létrehozásában és a felhasználói élmény gazdagításában. A legjobb az, hogy továbbra is kísérletezzen, és teljes mértékben kihasználja ezt a speciális front-end technológiát, mivel csodákra képes és dinamikusan átalakítja az oldalt.
Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiákkal való együttműködés képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.
Van egy kérdésünk? Kérjük, említse meg a „Háttérkép a CSS-ben” blog megjegyzés rovatában, és kapcsolatba lépünk Önnel.