Hogyan lehet megvalósítani a háttérképet a CSS-ben?

Ez a cikk részletes és átfogó ismereteket nyújt a CSS háttérképeiről. Hol kell használni és ugyanezt megvalósítani.

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

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')}

Background-url

  • 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.