rövid tájékoztatás

CSS verziók

Értékek

url Az érték a grafikus fájl elérési útja, amely az url() konstrukcióban van megadva. A fájl elérési útja beírható idézőjelekbe (dupla vagy egyszeres), vagy azok nélkül is. none Letiltja az elem háttérképét. inherit A szülő értékét örökli.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektummodell

document.getElementById("elementID ").style.backgroundImage

Böngészők

Az Internet Explorer 7.0-ig terjedő verziói hátteret alkalmaznak a hasLayout tulajdonsággal rendelkező elemek belső szegélyére. Ha az elemhez nem tartozik hasLayout , akkor a background-image tulajdonság tiszteletben tartja az elem határait, a specifikációban meghatározottak szerint. A megjelenítés különbsége akkor lesz észrevehető, ha a szegélyek szaggatottak vagy pontozottak, nem pedig egységesek.

Ha az elem görgetésre vagy automatikusra van állítva, az Internet Explorer 8 egy képpontos függőleges késleltetéssel rendelkezik, amikor a háttér görget.

Az Internet Explorer 7.0-ig terjedő verziói nem támogatják az öröklési értéket.

Ha a háttér egy táblázatsorhoz van beállítva (tag ), akkor a Chrome, Safari, iOS nem a specifikáció által előírt módon jeleníti meg, mégpedig minden cellára külön-külön. Míg a böngészőnek szilárd hátteret kell mutatnia a teljes sorban. A 2. példa a hibát bemutató kódot mutatja be.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

A példa eredménye a Chrome böngészőben az ábrán látható. 1. Az Internet Explorer, Opera és Firefox böngészők megfelelően jelenítik meg a sor hátterét (2. ábra).

Rizs. 1. Ismételje meg a hátteret minden cellánál

Rizs. 2. Háttér a teljes vonalhoz

Bármely weboldal felállításakor a funkcionalitás mellett a dizájn is nagyon fontos. Ez határozza meg egy adott cég vagy személy saját stílusát és dizájnját, akinek a weboldalt készítik. A háttérszín és a kép testreszabása egyszerű, ha követi a cikkben található utasításokat.

Nyissa meg a HTML-fájlt a Jegyzettömbbel vagy bármely más, megszokott szövegszerkesztővel. Vegyünk például egy primitív webhelyoldalt, minimális szöveggel. A fájlt bármelyik böngészővel megnyithatja.

Először módosítsa a háttér színét, mivel a lassú internetkapcsolattal rendelkezők nem láthatják azonnal a webhely háttérképét. Egy ideig, amíg a kép betöltődik, csak a webhely színét láthatják.
Írja be a címkébe paraméter bgcolor=”*****”, ahol a ***** a színkód. A HTML színeit bármely grafikus szerkesztőben megtudhatja a „webhez” opció kiválasztásával vagy a https://colorscheme.ru/color-names webhelyen

Csak ki kell választania egy színt a körpalettán, és hozzá kell rendelnie annak intenzitását a négyzeten belül. A jobb oldalon két html kód látható. Másolja ki őket, és illessze be a jegyzettömbbe.

Miután kiválasztotta a színt, és beillesztette a kódba, ellenőrizze, hogy mindent helyesen tett-e úgy, hogy megtekinti a kapott weboldalt egy böngészőből.

Most elkezdheti beilleszteni a háttérképet. Helyezze a kívánt képet a kódmappába a nagyobb kényelem érdekében. Adj neki egy nevet latin betűkkel.

Most megtudhatja a fájl helyét úgy, hogy jobb gombbal kattintson rá, válassza a „Megnyitás ezzel” lehetőséget, és kattintson a számítógépére telepített bármelyik böngészőre.

Másolja ki a címet a böngésző keresősávjából.

Most a címkében írja be a sort:

• style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Mentse el a fájlt.

Ellenőrizze a weboldalát. Látni fogja, hogy a háttér le lett cserélve a szövegére.

Kérjük, vegye figyelembe, hogy a nagyobb képernyőfelbontású felhasználók esetében a kép lefelé és jobbra duplikálódik. Nem fog jól kinézni, ha a kép nem monokróm. Speciális parancsok vannak a paraméter javítására.

• background-repeat : "Érték." Az Ön értékének beállításai a következők lehetnek: „repeat-x” – megismétli a háttérképet vízszintesen és függőlegesen is. „repeat-y” – ismétlés csak függőlegesen. „no-repeat” – a kép a helyére kerül, és nem ismétlődik. „space” – a teljes oldal a kép maximális számú másolatával lesz kitöltve, a legkülső oldalakat levágja. „kerek” – ugyanaz a lehetőség, de a kép szélei gondosan méretezve lesznek;
• background-attachment: „Érték”. Ha az Érték szó helyett a „scroll” címkét helyettesíti, a kép a webhelyen együtt fog gördülni. „fix” – görgetés közben a háttér változatlan marad;
• background-size: Érték Érték2. Itt az értékeknek pixelben kell lenniük. Például: 100 képpont 200 képpont. A pixeleken kívül százalékos értékeket is elfogadunk. Ez egy lehetőség az oldal képpel való feltöltésére. A számokon kívül két paramétert is megadhatunk: „contain” – a hosszú oldal mentén képpel tölti ki az oldalt és „borító” – szélessége mentén tölti ki képpel az oldalt.

Ha ismeri az oldal HTML-háttérrel való kitöltésének alapjait, készen áll az első webhely létrehozására.

Vlad Merzsevics

A weboldalak sajátosságaiból adódóan a háttérképek jelentős szerepet játszanak az oldaldokumentumok elrendezésében. Ugyanakkor számos dologban aktívan részt vesznek, például automatizálják a képek szöveghez csatolásának folyamatát, színátmeneteket hoznak létre, és természetesen hátteret adnak a tartalom alá. Az alábbiakban bemutatjuk a háttérképek használatának néhány szempontját.

Háttér egy weboldalon

A weboldal háttérképének beállítása hagyományosan a címke background attribútuma révén történik. . Ez a minta vízszintesen és függőlegesen ismétlődik, így kitölti a teljes böngészőablakot. Nyilvánvaló, hogy itt nincsenek különleges lehetőségek a kreativitásra, ezért forduljunk a stílusokhoz, és nézzük meg, mit lehet tenni a CSS használatával.

A CSS-nek öt attribútuma van, amelyek szabályozzák a háttérképet: a hozzáadás, a pozíció és az ismétlés. Mindezeket a paramétereket azonban felváltja egy univerzális tulajdonság, a background , amelyet a jövőben használni fogunk.

Háttérkép hozzáadása

A kép hozzáadása a kép címének az url kulcsszó használatával történik. A kép ismétlődésének szabályozására a no-repeat, a repeat-x (vízszintes ismétlés) és a repeat-y (függőleges ismétlés) argumentumokat használjuk. Ennek köszönhetően megkaphatja az ábrán látható weboldalt. 1.

Ha képet szeretne beállítani egy weboldalhoz, hozzá kell adnia egy háttérstílus-tulajdonságot a BODY választóhoz, az 1. példában látható módon.

1. példa: Háttérkép

Ebben a példában a target.gif grafika a weboldal háttereként van definiálva, a kép megismétlése nélkül. Annak elkerülése érdekében, hogy a kép szorosan illeszkedjen a böngésző széleihez, az eredeti helyéről 30 képponttal jobbra és 20 képponttal lefelé tolódik el.

Egy minta ismétlése

Tekintettel arra, hogy beállíthatja a háttérminta vízszintes vagy függőleges ismétlődését, számos lehetőség áll rendelkezésre a weboldalak tervezésére. Például egy függőleges csík létrehozásához a bal szél mentén (2. ábra), szüksége lesz az ábrán látható képre. 3.

A kialakításnak olyannak kell lennie, hogy függőlegesen, észrevehető varratok nélkül illeszkedjen egymáshoz, és a weboldal megadott háttérszínével is egységes egészet képezzen. A 2. példa bemutatja, hogyan lehet létrehozni egy ilyen háttérképet, ismét a background tulajdonságot és annak ismétlési y értékét használva.

2. példa A háttér függőleges ismétlése

Hasonlóképpen megismételheti a hátteret vízszintesen, például egy színátmenet létrehozásával és háttérképként történő beállításával (4. ábra).

ábrán látható weboldal eléréséhez. 4, először egy képet kell készítenie színátmenetes átmenettel. A szélesség 20-40 pixel megadásához elegendő, a kép magassága pedig a dokumentum céljától és a weboldal tartalmának várható magasságától függ. Ne felejtse el, hogy egy nagy rajz növeli a grafikus fájl méretét. Ez pedig negatívan befolyásolja a betöltési sebességét, és végső soron lassabb háttérmegjelenítéshez vezet. Erre az esetre egy 30x200 pixeles kép nagyon megfelelő volt (5. ábra).

A 3. példa bemutatja a HTML-kódot egy színátmenetes háttér létrehozásához.

3. példa: A háttér megismétlése vízszintesen

A színátmenetes kialakítás jól passzol egyszínű blokkhoz, ezért ebben a példában hozzáadunk egy réteget a weboldal tartalmának megjelenítéséhez.

Kép hozzáadása a szöveghez

A háttérkép használatával automatizálhatja az adott szöveghez, például fejlécekhez való grafikák hozzáadásának folyamatát. Ehhez használja a háttér univerzális tulajdonságot, amely a kívánt választóra vonatkozik. Az érték a kép elérési útja, és hogy ne ismétlődjön meg, a no-repeat argumentum (4. példa).

4. példa: Kép hozzáadása

Cím

Fő szöveg

Amint ebben a példában is látható, a rajz vízszintesen és függőlegesen mozgatható az eredeti helyzetéből, alapértelmezés szerint ez a blokkelem bal felső sarka. A háttéreltolás lehetővé teszi, hogy a képet a kívánt módon helyezze el a szöveghez képest. Annak elkerülése érdekében, hogy a szöveg átfedje a képet, hozzá kell adni a padding-left tulajdonságot, ami miatt a szöveg a megadott távolsággal jobbra tolódik el. Ez minden esetben egyedi, és általában megegyezik a kép szélességével, valamint a kép és a szöveg közötti kívánt térközzel.

A modern böngészők lehetővé teszik, hogy tetszőleges számú háttérképet adjunk egy elemhez, az egyes hátterek paramétereit vesszővel elválasztva felsorolva. Elég, ha az univerzális háttér tulajdonságot használjuk, és először egy hátteret adunk meg neki, és egy másodikat vesszővel elválasztva.

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

A háttér méretezéséhez használja a background-size tulajdonságot; állítsa az értékét 100%-ra, ekkor a háttér a böngészőablak teljes szélességét elfoglalja. A böngészők régebbi verzióinál speciális tulajdonságokat kell használnia előtagokkal, amint az az 1. példában látható.

Hogyan lehet háttérképet hozzáadni egy 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érstílus tulajdonság url értékében, amely viszont hozzáadódik a törzsválasztóhoz.

Lehetséges animált hátteret készíteni?

Az animáció egy meglehetősen erős technika, amellyel minden dokumentumot életre kelt, így nem meglepő, hogy a Flash technológia, amely rajzfilmeket ad a weboldalakhoz, és méghozzá interaktívak, rendkívül népszerűvé vált. A GIF grafikus formátum az egyszerű animációt is támogatja a képkockák egymás utáni változtatásával. Tehát egy ilyen formátumú kép használatával nem csak egyes képek animálhatók, hanem egy weboldal vagy egy adott elem háttere is.

Először is létre kell hoznia egy animált képet GIF formátumban, amelyhez használhatja az Adobe Photoshopot vagy más megfelelő programot erre a célra. Vannak olyan könyvtárak is, amelyek kész animált fájlokat tartalmaznak, amelyek háttérképként használhatók. Ezután a képet háttérként adjuk hozzá a háttérstílus tulajdonság használatával, az 1. példában látható módon.

Hogyan lehet háttérképet tenni az oldal jobb alsó sarkába?

A háttérkép oldali pozíciójának szabályozásához a háttér-pozíció stílus tulajdonságot használjuk, amely egyszerre állítja be 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 background-position tulajdonságot no-repeat értékkel.

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

Alapértelmezés szerint a háttérkép vízszintesen és függőlegesen ismétlődik, és mozaikot képez a weboldal teljes mezőjében. Ez a háttérviselkedés azonban nem mindig szükséges, különösen egyetlen kép elhelyezésekor, így segíthet, ha a háttérstílus tulajdonsághoz nem ismétlődő értéket ad hozzá.

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

A háttér ismétlése általában szükséges dekoratív vonalak vagy színátmenetek létrehozásához, amelyek egy weboldal elemének vagy ablakának magasságához vannak kötve. Ilyen esetekben a háttér függőleges ismétlése konzisztens képet ad, függetlenül az elemek méretétől. Csak először győződjön meg arról, hogy a háttérkép varrások nélkül ismétlődik.

14/12/27 56,3K

Bármely szoba sokkal jobban néz ki, ha a padlóját drága perzsa szőnyeg borítja. Akkor miért rosszabb a weboldalad? Talán itt az ideje, hogy a padlóját egy drága, elegáns, kézzel készített szőnyeggel „takarjuk be”. Nézzük meg közelebbről, hogyan készítsünk hátteret egy weboldalhoz:

Háttér az oldalhoz

Előfordul, hogy a régi weboldal dizájn unalmassá vált. És valami újat és finomat szeretnék. Az új dizájn pedig ugyanaz lesz, ha saját kezűleg készíti el.

De egy erőforrás teljes kialakításának önálló megváltoztatása hálátlan feladat. És nem mindenki keze van megfelelően képzett erre a feladatra. Ezért egy régi sablon frissítésének legegyszerűbb módja az erőforrás háttérszínének vagy háttérképének megváltoztatása.

Számos módja van a webhely hátterének megváltoztatására. Ehhez a CSS vagy a html képességeit használják. De a háttérrel való munkavégzésre szolgáló számos tulajdonságnak ugyanaz a neve és az alkalmazási mód ezekben a webes technológiákban.

A html háttérrel való munka alapjai

Számos elem használható háttérként:

• Szín;
• Háttérkép;
• Textúra kép.

Nézzük meg részletesebben mindegyik felhasználását.

Egy webhely háttérszínének beállításához használja a style attribútum háttérszín tulajdonságát. Vagyis egy weboldal fő színének beállításához be kell írni a címkébe . Például:

Webhely háttere #55D52B

A hexadecimális színkód mellett kulcsszó vagy RGB formátumú érték is támogatott. Példák:

Webhely háttér rgb(23,113,44)

Weboldal háttér zöld

A háttérszín kulcsszavakkal történő beállításának számos korlátja van a másik két módszerhez képest.

A HTML csak 16 kulcsszót támogat a színek beállításához. Íme néhány közülük: fehér, piros, kék, fekete, sárgaés mások.

Ezért egy html webhely hátterének beállításához jobb, ha hexadecimális vagy RGB formátumot használ.

A színválasztáson kívül más testreszabási lehetőségek is rendelkezésre állnak. Ha a háttérszín tulajdonság átlátszóra van állítva, az oldal háttere átlátszóvá válik. Ez az érték alapértelmezés szerint ehhez a tulajdonsághoz van rendelve.

Most nézzük meg a hipertext nyelv képességeit egy webhely háttérképének beállításához. Ez megtehető a background-image tulajdonsággal.

Amint a kódból látható, a kép a zárójelben megadott url elérési úton keresztül kapcsolódik. De nem minden kép olyan nagy, hogy mérete kitölti a képernyő teljes területét. Lássuk, hogyan jelenik meg a kisebb kép.

Tegyük fel, hogy egy költészetről szóló weboldalt fejlesztünk, és háttérként Pegazus képét kell használnunk. A szárnyas ló megszemélyesíti a költő alkotó gondolatának szabadságát!

Szükségünk van arra, hogy a kép egyszer megjelenjen a képernyő közepén. De sajnos a böngésző nem érti fennkölt vágyainkat. És egy kisebb képet jelenít meg a webhely hátterében, ahányszor a képernyőterület elfér:

Talán négy mosolygós, szárnyas ló túl sok inspiráció lesz a költők számára. Ezért megtiltjuk Pegazusunk klónozását. Ezt a background-repeat tulajdonság használatával tesszük. Lehetséges értékek:

• ismétlés-x – a háttérkép vízszintes ismétlése;
• repeat-y – függőlegesen;
• ismétlés – mindkét tengelyen;
• no-repeat – az ismétlés tilos.

A felsorolt ​​lehetőségek közül minket az utolsó érdekel. A webhely hátterének megváltoztatása előtt azt használjuk a kódunkban:

De persze jobb lenne, ha a szórólapunk a képernyő közepén lenne. A background-position tulajdonság pontosan arra szolgál, hogy a háttérképet elhelyezze az oldalon. A hely koordinátáit többféleképpen is beállíthatja:

• Kulcsszó ( fent, lent, középen, balra, jobbra);
• Százalék – a számolás a bal felső sarokból indul;
• Mértékegységben (pixelben).

Használjuk a legegyszerűbb központosítási lehetőséget:

Előfordul, hogy görgetés közben rögzítenie kell a kép helyzetét. Ezért, mielőtt képet készítene a webhely hátterének, használja a háttér-csatolás speciális tulajdonságát. Az általa elfogadott értékek a következők:

• tekercs;


• rögzített.

Az utolsó értékre van szükségünk. Most a példakódunk így fog kinézni:

Weboldal textúra háttér

Az első példában egy nagy és gyönyörű sivatagi tájat használtunk a háttérnek. De egy ilyen szépségért teljes összeget kell fizetni. Egy jó minőségben készült kép súlya elérheti a több megabájtot is.

Ez a kötet semmilyen módon nem befolyásolja a nagy sebességű internetkapcsolattal rendelkező böngésző oldalbetöltési sebességét. De mi a helyzet a mobilinternettel, használatakor több „méter” betöltés sok időt vesz igénybe?