Háttérkép html. A háttér mindig átnyúlik az oldalon

A szerzőtől:Üdvözlök mindenkit. A háttérszínek és képek óriási szerepet játszanak a webdesignban, mivel lehetővé teszik bármely elem vonzóbb tervezését. Ma megnézzük, hogyan lehet hátteret készíteni html -ben.

El lehet érni a html -t a háttér beállításakor?

Azonnal meg kell mondanom, hogy nem. A html -t általában nem weboldalak stílusára tervezték. Csak nagyon kényelmetlen. Például van egy bgcolor attribútum, amellyel beállíthatja a háttérszínt, de ez nagyon kényelmetlen.

Ennek megfelelően lépcsőzetes stíluslapokat (css) fogunk használni. Sokkal több lehetőség van a háttér beállítására. Ma a legalapvetőbbeket elemezzük.

Hogyan állíthatom be a hátteret a css -en keresztül?

Tehát először is el kell döntenie, hogy melyik elemhez kell beállítani a hátteret. Vagyis meg kell találnunk azt a választót, amelyre írni fogjuk a szabályt. Például, ha a hátteret az egész oldal egészére kell beállítani, akkor ezt a törzsválasztón, az összes blokkon - a div választón keresztül teheti meg. Nos, stb. A háttér bármely más választóhoz köthető és kell is: stílusosztályok, azonosítók stb.

Miután kiválasztotta a választót, be kell írnia a tulajdonság nevét. A háttérszín (csak egyszínű, nem színátmenet vagy kép) beállításához használja a háttérszín tulajdonságot. Ezután be kell helyeznie egy kettőspontot, és be kell írnia a színt. Ezt különböző módon lehet megtenni. Például kulcsszavak, hexadecimális kód, rgb formátumok, rgba, hsl. Bármilyen módszer megteszi.

A leggyakrabban használt módszer a hexadecimális kód. A színegyezéshez használhat olyan programot, amely megjeleníti a színkódot. Például Photoshop, festék vagy valamilyen online eszköz. Ennek megfelelően például általános hátteret írok a teljes weboldalhoz.

törzs (háttérszín: # D4E6B3;)

Ezt a kódot be kell illeszteni a fejrészbe. Fontos, hogy a fájlok ugyanabban a mappában legyenek.

Kép háttérként

Képként egy kis HTML nyelvű ikont fogok használni:

Hozzunk létre egy üres blokkot azonosítóval:

< div id = "bg" > < / div >

Adjunk meg egy kifejezett méretet és hátteret:

#bg (szélesség: 400 képpont; magasság: 250 képpont; háttérkép: url (html.png);)

#bg ( szélesség: 400 képpont; magasság: 250 képpont; háttér - kép: url (html. png);

Ebből a kódból láthatja, hogy új tulajdonságot használtam - háttérképet. Csak egy kép beillesztésére szolgál html elem háttérként. Nézzük meg mi történt:

Kép beállításához a kettőspont után kell írni kulcsszó url, majd zárójelben adja meg a fájl elérési útját. Ebben az esetben az útvonalat annak alapján kell megadni, hogy a kép ugyanabban a mappában van, mint a html dokumentum. Meg kell adnia a kép formátumát is.

Ha ezt megtette, és a háttér továbbra sem jelenik meg a blokkban, ellenőrizze újra, hogy helyesen írta -e be a kép nevét, helyesen adta -e meg az elérési utat és a kiterjesztést. Ezek a leggyakoribb okok, amelyek miatt a háttér egyszerűen nem jelenik meg, mert a böngésző nem találja a képet.

De észrevett egy sajátosságot? A böngésző felvette és reprodukálta a képet az egész blokkban. Tehát, hogy tudja, ez a háttérképek alapértelmezett viselkedése - függőlegesen és vízszintesen ismétlődnek, amíg el nem férnek a blokkban. Könnyedén irányíthatja ezt a viselkedést. Ehhez használja a háttér-ismétlés tulajdonságot, amelynek 4 fő értéke van:

Ismétlés - alapértelmezett érték, a kép mindkét oldalon megismétlődik;

Repeat -x - csak az ois x esetén ismétlődik;

Repeat-y-csak az y tengely mentén ismétlődik;

Nincs ismétlés - egyáltalán nem ismétlődik;

Leírhatja az egyes értékeket, és megnézheti, mi történik. Így írom le:

háttér-ismétlés: ismétlés-x;

háttér - ismétlés: ismétlés - x;

Most csak vízszintesen ismételje meg. Ismétlés nélkül csak egy kép lenne.

Remek, ezt már befejezheti, mivel ezek alapvető lehetőségek a háttérrel való munkához, de mutatok még 2 olyan tulajdonságot, amelyek lehetővé teszik, hogy nagyobb irányítást kapjon.

Ismétléssel az elrendezéstervezők háttér -textúrákat és színátmeneteket értek el egy apró kép segítségével. Lehetett 30 x 10 pixel vagy kevesebb. Talán még egy kicsit. A kép olyan volt, hogy amikor egyik vagy akár mindkét oldalon megismételték, nem láthatók átmenetek, így ennek eredményeként egyetlen szilárd hátteret kaptunk. Egyébként ezt a megközelítést érdemes most használni, ha zökkenőmentes textúrát szeretne használni webhelyén háttérként. Ma már a gradiens is megvalósítható css3 módszerekkel, erről mindenképpen beszélni fogunk.

Háttér helyzet

Alapértelmezés szerint a háttérkép, ha nincs ismétlésre beállítva, a blokk bal felső sarkában lesz. De a pozíció könnyen megváltoztatható a background-position tulajdonság használatával.

Különféleképpen kérdezheti. Az egyik lehetőség egyszerűen jelzi azokat az oldalakat, amelyeken a képet elhelyezni kell:

háttér-pozíció: jobb felső;

háttér - pozíció: jobb felső;

Vagyis függőlegesen minden változatlan marad: a háttérkép felül található, de vízszintesen az oldalt jobbra, azaz a jobbra cseréltük. A pozíció beállításának másik módja a százalék. Ebben az esetben a visszaszámlálás minden esetben a bal felső sarokból indul. 100% - az egész blokk. Így, hogy a képet pontosan a középpontba helyezzük, ezt írjuk:

háttér-pozíció: 50% 50%;

háttér - pozíció: 50% 50%;

Ne feledje a pozicionálással kapcsolatos fontos dolgot - az első paraméter mindig a vízszintes helyzet, a második pedig a függőleges helyzet. Tehát, ha 80% 20% értéket lát, akkor azonnal arra a következtetésre juthat, hogy a háttérkép erősen jobbra tolódik, de nem csökken sokat.

És végül, a pozíciót pixelben írhatja le. Minden ugyanaz,%helyett csak px lesz használva. Bizonyos esetekben erre a pozicionálásra is szükség lehet.

Rövidített jelölés

Egyetértünk azzal, hogy a kód meglehetősen nehézkes lesz, ha minden úgy van beállítva, ahogy mi tettük. Kiderül, hogy meg kell adni a kép elérési útját, az ismétlést és a pozíciót. Természetesen az ismétlésre és a pozícióra nem mindig van szükség, de mindenesetre helyesebb a gyorsított tulajdonság jelölést használni. Ez így néz ki:

háttér: # 333 url (bg.jpg) nincs ismétlés 50% 50%;

háttér: # 333 url (bg.jpg) nincs ismétlés 50% 50%;

Vagyis az első lépés, ha szükséges, rögzítse a teljes egységes háttérszínt. Ezután a képhez vezető út, ismétlés és pozíció. Ha valamilyen paraméterre nincs szükség, akkor egyszerűen kihagyjuk. Egyetértek, ez sokkal gyorsabb és kényelmesebb, és jelentősen csökkentjük a kódunkat is. Általában azt tanácsolom, hogy mindig rövidítésekben írjon, még akkor is, ha csak színt vagy képet kell megadnia.

A háttérkép méretének szabályozása

Jelenlegi képünk nem alkalmas a következő trükkre, ezért veszek egy másikat. Méretben legyen egy blokk, vagy nagyobb, mint ő. Képzelje el tehát, hogy egy feladattal kell szembenéznie: készítsen háttérképet, hogy ne töltse ki teljesen a blokkját. És például a kép még nagyobb, mint a blokk mérete.

Mit tehet ebben az esetben? Természetesen a legegyszerűbb és ésszerű megoldás az lenne, ha egyszerűen csökkentené a képet, de ez nem mindig lehetséges. Tegyük fel, hogy a szerveren van, és jelenleg nincs idő vagy lehetőség annak csökkentésére. A probléma megoldható a háttérméret tulajdonság használatával, amelyet viszonylag újnak nevezhetünk, és amely lehetővé teszi a háttérkép méretének vagy akármilyen háttér manipulálását.

Tehát a képem most foglalja el a blokk összes helyét, de megadom a háttér méretét:

háttérméret: 80% 50%;

háttér - méret: 80% 50%;

Ismét az első paraméter a vízszintes méret, a második a függőleges méret. Láthatjuk, hogy mindent helyesen alkalmaztunk - a fotó szélességének 80% -a szélességben és fele magasságban lett. Itt csak egy pontosítást kell tennie - a méret százalékos beállításával befolyásolhatja a kép arányait. Ezért vigyázzon, nehogy kilépjen az arányból.

Ahogy sejtheti, a háttér mérete pixelben is megadható. Két jelentéstartalmú kulcsszó is használható:

Borító - a kép méretezése úgy történik, hogy legalább az egyik oldala teljesen kitöltse a blokkot.

Tartalmaz - méretezi úgy, hogy a kép maximális méretében teljesen illeszkedjen a blokkba.

Ezeknek az értékeknek az az előnye, hogy nem változtatják meg a kép oldalarányát, ugyanazok maradnak.

Azt is meg kell értenie, hogy a kép nyújtása a minőség romlásához vezethet. Példát tudok mondani az elrendezéstervezők életéből és valós gyakorlatából. Mindenki tudja és érti, hogy az asztali számítógépek kódolásakor a webhelyet a monitorok fő szélességéhez kell igazítani: 1280, 1366, 1920. Ha például 1280 x 200 méretű háttérképet készít, és nem állítja be háttérméretű, akkor a szélességű képernyők nagyobb üres helyet jelenítenek meg, a kép nem tölti ki teljesen a szélességet.

Az esetek 99% -ában ez nem felel meg a webfejlesztőnek, ezért úgy állítja be a háttér-méret: fedelet, hogy a kép mindig az ablak maximális szélességére nyúljon. Ez egy jó trükk, amelyet használni lehet, de most azzal a problémával szembesül, hogy az 1920 képpontos képernyő szélességű felhasználók láthatják a nem optimális minőségű képet.

Hadd emlékeztessem önöket, hogy a maximális szélességig nyúlik. Ennek megfelelően a minőség automatikusan romlik. Az egyetlen helyes megoldás itt az lenne, ha kezdetben nagyobb képet használnánk - 1920 képpont széles. Ezután a legszélesebb képernyőkön természetes méretben lesz, másokon pedig egyszerűen csak lassan, de ugyanakkor, a háttérkép megfelelő kiválasztásával, levágva megjelenés a webhelyet nem érinti.

Általánosságban elmondható, hogy ez csak 1 példa arra, hogyan lehet az ebben a cikkben megszerzett ismereteket felhasználni valódi elrendezések készítésekor.

Félig átlátszó háttér css -vel

Egy másik trükk, amelyet a css segítségével lehet megvalósítani, a félig átlátszó háttér. Vagyis ezen a háttéren keresztül látni lehet, hogy mi van mögötte.

Példaként az egész oldalt háttérképként állítom be, amelyet korábban a példákban használtunk. A bg azonosítójú blokkhoz, amelyen minden kísérletünket elvégezzük, az rgba színformátum segítségével állítjuk be a hátteret.

Mint korábban említettem, a css -ben sok formátum létezik a színek beállításához. Egyikük az rgb, egy meglehetősen jól ismert formátum azok számára, akik dolgoznak grafikus szerkesztők... Így van írva: rgb (17, 255, 34);

A zárójelben lévő első érték a piros, majd a zöld, majd a kék telítettsége. Az érték lehet numerikus 0 és 255 között. Ennek megfelelően az rgba formátum sem különbözik, csak egy további paraméter kerül hozzáadásra - az alfa -csatorna. Az érték 0 és 1 között lehet, ahol a 0 a teljes átlátszóság.

Sok kezdő elrendezéstervező, akik csak a weboldal készítés lényegébe mélyednek, gyakran azon tűnődnek, hogyan lehet háttérképet készíteni html -ben. És ha egyesek kitalálják ezt a feladatot, akkor ugyanazok a problémák merülnek fel, amikor a képet a monitor teljes szélességére nyújtják. Ugyanakkor szeretném, ha az oldal minden böngészőben azonos módon jelenne meg, ezért a böngészők közötti követelménynek teljesülnie kell. A hátteret kétféleképpen állíthatja be: használatával és CSS stílus. Mindenki kiválasztja magának a legjobb lehetőséget. Természetesen a CSS stílus sokkal kényelmesebb, mert a kódja benne van tárolva külön fájlés nem foglal el extra oszlopokat a webhely fő címkéin, de először vegyünk egy egyszerű módszert, amellyel képet állíthatunk be a webhely hátterére.

Alapvető HTML -címkék a háttér létrehozásához

Tehát térjünk át a kérdésre, a html háttér teljes képernyős. Annak érdekében, hogy az oldal gyönyörűen nézzen ki, meg kell értenie egy meglehetősen fontos részletet: csak gradiens hátteret kell készítenie, vagy egyszínűre kell festenie, de ha képet kell beszúrnia a háttérbe, akkor nem nyúlik ki a monitor teljes szélességében. Kezdetben ki kell választania a képet, vagy terveznie kell egy ilyen kiterjesztéssel, amelyben megjeleníti a webhely oldalát. Csak miután elkészült a háttérkép, átvisszük a "Képek" nevű mappába. Ebben tároljuk az összes használt képet, animációt és egyéb grafikus fájlt. Ennek a mappának a gyökérkönyvtárban kell lennie az összes html fájllal. Most mehet a kódhoz. Számos lehetőség van olyan kód írására, amellyel a háttér képpé változik.

1. Írjon attribútumcímkét.
2. CSS stíluson keresztül HTML kódban.
3. Írja a CSS stílust külön fájlba.

Rajtad múlik, hogyan készíthet képet a háttérből HTML -ben, de szeretnék néhány szót mondani arról, hogyan lenne a legoptimálisabb. Az első módszer a tag attribútum írásával már régóta elavult. A második lehetőséget nagyon ritka esetekben használják, csak azért, mert sok azonos kódot kapnak. És a harmadik lehetőség a leggyakoribb és leghatékonyabb. Itt HTML példák címkék:

1. Az írás első módja az index.htm fájl (body) tag attribútumán keresztül. A következő formában van írva: (body background = "Mappa_név / Képnév.extension") ( / body). Vagyis, ha van egy képünk "Picture" névvel és JPG kiterjesztéssel, és a mappát "Images" -nek neveztük el, akkor a HTML kód így fog kinézni: (body background = "Images / Picture.jpg") ... (/ test) ...
2. A második írásmód hatással van a CSS stílusra, de ugyanabban az index.htm nevű fájlban van írva. (body style = "background: url (" ../ Images / Picture.jpg ")").
3. A rögzítés harmadik módja pedig két fájlban történik. Az index.htm nevű dokumentumban a következő sor van írva: (head) (link rel = "stylesheet" type = "text / css" href = "CSS_file_path") ( / head). A style.css nevű stíluslapba pedig már beírjuk: body (háttér: url (Képek / Kép.jpg ")).

Kitaláltuk, hogyan tehetjük a háttérképet HTML -képpé. Most ki kell találnia, hogyan nyújtsa ki a képet a teljes képernyő szélességére.

A háttérkép nyújtásának módjai az ablak szélességére

Képzeljük el képernyőnket százalékban. Kiderült, hogy a képernyő teljes szélessége és hossza 100% x 100% lesz. Erre a szélességre kell nyújtanunk a képet. Adjon hozzá egy sort a style.css fájl képbejegyzéséhez, amely a képet a monitor teljes szélességére és hosszára nyújtja. Hogyan írják ezt CSS stílusban? Ez ennyire egyszerű!

háttér: url (Képek / Kép.jpg ")

háttérméret: 100%; / * ez a legtöbb modern böngészőben működik * /

Tehát kitaláltuk, hogyan lehet a kép hátterét html -ben teljes képernyősre állítani. Az index.htm fájlba is lehet írni. Bár ez a módszer elavult, szükséges, hogy a kezdők ismerjék és megértsék. A (head) (style) div (background-size: cover;) (/ style) (/ head) címkében ez a bejegyzés azt jelenti, hogy egy speciális blokkot választunk a háttérhez, amely a teljes szélességben lesz elhelyezve ablak. Két módszert vizsgáltunk, hogyan lehet a webhely hátterét html -képpé alakítani úgy, hogy a kép a képernyő teljes szélességére nyúljon bármelyik modern böngészőben.

Hogyan készítsünk fix hátteret

Ha úgy dönt, hogy egy képet használ egy jövőbeli webes erőforrás hátterének, akkor csak meg kell tanulnia, hogyan kell mozdulatlanná tenni, hogy ne húzódjon hosszában és ne rontsa el az esztétikai megjelenést. Könnyű felírni ezt a kis kiegészítést a segítséggel. Hozzá kell adnia egy kifejezést a style.css fájlban a háttér után: url (Images / Picture.jpg ") fix; vagy ehelyett külön sort kell hozzáadnia a pontosvessző után - position: fix. Így a háttérkép mozdulatlanná válik. A webhely tartalmának görgetésekor a szövegsorok mozognak, és a háttér a helyén marad. Tehát megtanulta, hogyan készíthet háttérképet html -ben többféle módon.

Munka táblával HTML -ben

Sok tapasztalatlan webfejlesztő, amikor táblákkal és blokkokkal szembesül, gyakran nem érti, hogyan lehet képet készíteni a táblázat hátterében html -ben. Mint minden és a CSS stílus, ez a webes programozási nyelv is meglehetősen egyszerű. És a megoldás erre a problémára az lenne, ha írna pár sor kódot. Már tudnia kell, hogy a helyesírás táblázat soraiés az oszlopokat (tr) és (td) címkékként jelölik. Ahhoz, hogy a táblázat háttere kép formájában legyen, hozzá kell adnia egy egyszerű kifejezést a címkéhez (táblázat), (tr) vagy (td) a képre mutató hivatkozással: háttér = a kép URL -je. Az egyértelműség kedvéért íme néhány példa.

Táblázatok háttér helyett képpel: HTML -példák

Rajzoljunk egy 2x3 -as táblázatot, és tegyük a „Képek” mappába mentett háttérképnek: (tábla háttér = „Képek/ Kép.jpg”) (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ táblázat). Ez tölti meg az asztalunkat a kép hátterével.

Rajzoljuk le ugyanazt a 2x3 -as lemezt, de illesszük be a képet az 1, 4, 5 és 6 sorszámú oszlopokba. (Táblázat) (tr) (td háttér = „Képek / Kép.jpg”) 1 ( / td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td háttér = „Képek/ Kép.jpg”) 4 (/ td) (td háttér = „Képek/ Kép.jpg”) 5 ( / td) (td háttér = „Képek/ Kép.jpg”) 6 (/ td) (/ tr) (/ táblázat). Megtekintés után látjuk, hogy a háttér csak azokban a cellákban jelenik meg, amelyekbe regisztráltunk, és nem a teljes táblázatban.

Böngészőközi webhely

Van olyan dolog is, mint a böngészők közötti webes erőforrás. Ez azt jelenti, hogy a webhely oldalai egyformán helyesen jelennek meg különböző típusokés a böngésző verzióit. Ugyanakkor testre kell szabnia a HTML -kódot és a CSS -stílust a szükséges böngészőkhöz. Ezen túlmenően, az okostelefonok fejlődésének modern korában sok webfejlesztő megpróbál olyan webhelyeket létrehozni, amelyek ehhez igazodnak mobil verziókés a számítógép nézete alatt.

A modern böngészők tetszőleges számú háttérképet adhatnak hozzá egy elemhez, felsorolva az egyes hátterek beállításait, vesszővel elválasztva. Elég az univerzális tulajdonságháttér használata, és először az egyik hátteret kell megadni, a másodikat pedig vesszővel elválasztva.

Hogyan nyújtsam ki a hátteret az ablak teljes szélességére?

A háttérméret tulajdonság a háttér méretezésére szolgál, 100% -ot ad meg értékként, majd a háttér a böngészőablak teljes szélességét elfoglalja. A böngészők régebbi verzióihoz speciális tulajdonságokat kell használni előtagokkal, amint az az 1. példában látható.

Hogyan adhatok háttérképet a weboldalhoz?

Ha háttérképet szeretne hozzáadni egy weboldalhoz, állítsa be a kép elérési útját a háttér stílus tulajdonsága url értékén belül, amely hozzáadódik a törzsválasztóhoz.

Készíthetek animált hátteret?

Az animáció elég erős technika, amely bármely dokumentumot életre kelthet, így nem meglepő, hogy a Flash technológia óriási népszerűségre tett szert, ami karikatúrákat ad a weboldalakhoz, ráadásul interaktívakhoz. A GIF grafikus formátum az alapvető animációkat is támogatja, egymást követő keretváltások révén. Tehát egy ilyen formátumú kép használatával megengedett az egyes képek animálása, hanem egy weboldal vagy egy adott elem hátterének animálása is.

Először létre kell hoznia egy animált képet GIF formátumban, amelyet használhat Adobe program Photoshop vagy más erre alkalmas. Vannak kész animált fájlok könyvtárai is, amelyek háttérképként használhatók. Ezután a képet hozzáadjuk háttérként a háttérstílus tulajdonság használatával, amint az az 1. példában látható.

Hogyan tegyem a háttérképet az oldal jobb alsó sarkába?

A háttér-pozíció stílus tulajdonság a háttérkép pozíciójának szabályozására szolgál az oldalon; egyidejűleg beállítja a kép vízszintes és függőleges koordinátáit. A háttérkép ismétlésének megszakításához használja a háttér-pozíció tulajdonságot a megismétlés nélküli értékkel.

Hogyan akadályozhatom meg a háttér ismétlődését?

Alapértelmezés szerint a háttérkép vízszintesen és függőlegesen ismétlődik, és mozaikban sorakozik fel a weboldal teljes területén. A háttér ilyen viselkedése azonban nem mindig szükséges, különösen egyetlen kép elhelyezése esetén, így a háttér stílus tulajdonsághoz hozzáadott ismétlődés-mentes érték segít.

Hogyan állíthatom be, hogy a háttér csak függőlegesen ismétlődjön?

Háttérismétlésre általában szükség van dekoratív vonalak vagy színátmenetek létrehozásához, amelyek illeszkednek az elem vagy a weboldal ablakának magasságához. Ilyen esetekben a háttér függőleges megismétlése zökkenőmentes képet nyújt az elemek méretétől függetlenül. Már az elején aggódnia kell, hogy a háttérkép varrat nélkül ismétlődik.

Az utolsó cikkben arról beszéltünk, hogyan lehet megváltoztatni a háttérszínt a webhelyen a címke attribútumai segítségével testés CSS stílusok :. Ebben a cikkben arra összpontosítunk, hogy a képeket háttérként használjuk egy webhelyen, hogyan kell a hátteret az oldal teljes szélességére nyújtani és kijavítani.

Kép oldalháttérként - HTML

Először nézzük meg annak a módját, hogyan állíthatunk be háttérképet egy webhelyre egy attribútum használatával háttér címke test:

Itt a háttérkép beállítása a body tag háttérattribútumával történik.

A fenti példához hasonlóan a kép mellett ajánlott megadni a háttérszínt is (ez megjelenik az oldalon az oldal betöltése során), amely maximálisan kombinálódik a háttérképpel és kontrasztot teremt a bekapcsolt szöveggel az oldal. Például, ha fehér szövegszínt használ a webhelyen, akkor sötét háttérszínt kell megadnia, és sötét háttérképet kell beállítania. Ebben az esetben a szöveg könnyen olvasható lesz.

Jegyzet: Javasoljuk, hogy a háttérképet és a háttérszínt ne HTML használatával, hanem gombbal állítsa be CSS használatával... Ebben az esetben a kód érvényes és helyesebb lesz.

Kép oldalháttérként - CSS

A CSS -ben a háttérszín és a háttérkép egyetlen tulajdonsággal állítható be háttér:

Itt a háttérkép beállítása a háttér CSS tulajdonság használatával történik.

Itt az ingatlan használatával háttér-kötődés az oldal háttere rögzített, és használja a tulajdonságot háttér-ismétlés a kép vízszintes ismétlése be van állítva. De érdemes megfontolni, hogy a háttérképet jól "varrni" kell a szélek körül.

Ha a háttérképet a böngészőablak teljes méretére szeretné nyújtani, használja a tulajdonságot háttérméret: 100%;

A "Nubex" webhelykonstruktorban minden olyan webhelyhez, amelyet használhat nagy kép háttérként és fagyassza le.

17.10.2015

Még nem

Üdv mindenkinek!
Továbbra is tanuljuk a HTML alapjait.
Ebben a leckében elmondom és példákkal mutatom be hogyan készítsünk hátteret egy színből vagy egy képből egy HTML oldalon.
Elég egyszerű!
Kezdjük a színnel!
Azt hiszem, nem hagyta ki, ahol elmondtam, hogyan kell megváltoztatni a szöveg színét, és a cikk végén kódokat adtam a különböző színekhez és árnyalatokhoz. Miért emlékeztettem erre a leckére? Igen, mert van egy asztal kész kódok színeket, vegye be és gyakorolja azonnal ebben a leckében.
Tehát hogyan lehet háttérszínt készíteni a HTML -ben ...

Háttérszín HTML -ben

A HTML dokumentum alapértelmezett háttérszíne a fehér. Hogyan állíthatja be a kívánt színt?
Ebben segít nekünk a "bgcolor" attribútum. A háttér festéséhez adja hozzá ezt az attribútumot a "body" címkéhez:

Vagy így:

Itt a teljes HTML kód:

Az oldal szövege zöld lesz, a háttér fekete.

Az eredmény a következő lesz:

Ha háttérről szeretne képet készíteni, akkor adja hozzá a "baсkground" attribútumot a "body" címkéhez:

Töltsön ki minden olyan képet, ahol a weboldala található (például az oldalam "fon" neve ".gif" kiterjesztéssel):

Itt a teljes HTML kód:

Az eredmény a következő lesz:

Ha a háttérkép a képek mappában vagy más mappában található, akkor a következőképpen fog kinézni:

Itt a teljes HTML kód:

Az oldal szövege gyönyörű alapon.

Ez minden mára! Azt hiszem, a lecke nem volt nehéz, és mindent megértesz. Ha bármilyen kérdése van, írjon megjegyzéseket.
Várom Önt a következő órákon.

Előző poszt
Következő bejegyzés