Hogyan készítsünk egy kép hátteret HTML és CSS-ben. 3 egyszerű módja

Beállítja a hátsó terv színét a palettáról. Az örökös színe mindig egybeesik az ősi elem színével.
Üdvözlet. Ebben a cikkben szeretném elmondani, hogy körülbelül háromféleképpen helyezzen el egy képet a teljes oldal hátterének, csak HTML + CSS (JS használat nélkül).

Üdvözlet. Ebben a cikkben szeretném elmondani, hogy körülbelül háromféleképpen helyezzen el egy képet a teljes oldal hátterének, csak HTML + CSS (JS használat nélkül).

Tehát a háttérkép követelményei a következők:

  • 100% szélesség és oldalak magassága
  • Szükség esetén a háttér mérlegek (a háttér méretétől függően a hátteret feszítik vagy tömörítik)
  • Illessze be a képek arányait (képarány)
  • A kép középpontjában az oldalon
  • A háttér nem okoz görgetést
  • A megoldás maximálisan crossbrawser
  • A CSS kivételével más technológiákat nem használnak

Beállítja a hátsó terv színét a palettáról. Az örökös színe mindig egybeesik az ősi elem színével.

1. módszer

Véleményem szerint ez a legjobb módja annak, mert ez a legegyszerűbb, tömör és modern. A CSS3 tulajdonságot használja Háttérméret. amit a címkére alkalmazunk Html . Pontosan Html , de nem Test. mivel Magassága nagyobb vagy egyenlő a böngészőablak magasságával.

Telepítsen egy rögzített és középső hátteret, majd állítsa be a méretét Háttér méret: Fedél .

Html { 

Háttérkép: URL (képek / background.jpg);

Háttér ismétlés: nincs ismétlés;

Háttér-pozíció: Központ;

Háttérképezés: fix;

-Webkit-background méret: fedél;

-Moz-background méret: fedél;

-O-háttér méret: fedél;

Háttér méret: fedél; 
} 

Demó

Ez a módszer működik

  • Chrome (bármilyen verzió)
  • Opera 10+.

Firefox 3.6+

Safari 3+.

IE 9+

Annak érdekében, hogy a képek gyorsan betöltsék, helyezze a webhelyeit csak a bevált hosting szolgáltatóktól, például a beet.com-on 
A felhasználók és a keresőmotorok szeretik a gyors webhelyeket. 

Háttérkép: URL (képek / background.jpg);

2. módszer

Ez a módszer az IMG elem használatát biztosítja, amelynek mérete a böngészőablak méretétől függően változik. A képet a teljes képernyőre nyújtani, a min-magasságot és a szélességet 100% -os értékkel kell beállítani. És így a kép nem tömörítette a kisebb méretet, mint az eredeti, telepítse a min-szélességet a kép egyenlő szélességének értékével.

Ha az ablak szélessége kisebb, mint a kép szélessége, a média lekérdezése a középpontban lévő háttér összehangolására szolgál.

örököl.

<img src = "/ képek / background.jpg" osztály = "Háttér" />

img.background { Min-Magasság: 100%; Min-szélesség: 640px; Szélesség: 100%; Magasság: Auto;

Pozíció: fix; Top: 0; Bal: 0;

/ * A kép méretétől függ * /

@Media képernyő és (max-szélesség: 640px) { img.bg { и Bal: 50%; margó-balra: -320px; } } } Demó

Örökli a szülőelem összes jellemzőjét

Ez a módszer:

A jó böngészők (króm, opera, firefox, szafari) verziói IE 9+ и 3. módszer. . Egy másik módja a következő: fix a kép <img /> a bal felső sarokban az oldal és nyúlik a min-width és min-height tulajdonságok 100%, miközben a képarányt. Igaz, ezzel a megközelítéssel a kép nem központosított. De ezt a problémát megoldja a <div /> csomagolásával, amelyet az ablak méretének kétszeresét készítünk. És a kép maga nyúlik és helyezünk a központba. <div osztály = "Háttér"> <img src = "/ képek / background.jpg" />

</ div> Div.background { <div osztály = "Háttér"> Pozíció: fix;

TOP: -50%;

Balra: -50%; } Szélesség: 200%; Magasság: 200%; }

img { Pozíció: abszolút; Top: 0;

Bal: 0; Jobb: 0; :

Alsó: 0;

Margó: Auto; Min-szélesség: 50%; MIN-Magasság: 50%; } .

Ez a módszer jó böngészőkben és azaz 8+.

Remélem, hogy ez az információ hasznos lesz az Ön számára. Személy szerint, gyakran használom ezeket a módszereket, különösen először. Biztosan vannak más módok arra, hogy a képet a hátsó háttérre helyezzük CSS-vel. Ha tudsz róluk, megosztani, megjegyzéseket. Állítsa be a háttérszínt és / vagy egy oldalra lévő képet, vagy egy külön elem egyszerű legyen. A legfontosabb dolog az, hogy tudd meg, hol és hogyan lehet megtenni, és hogy legyen színes kód és / vagy háttérkép. Lehetséges, hogy ebből a cikkből sok új dolgot fog tanulni, de kifejezetten kezdőknek jöttem létre. Ezért minden a lehető legrövidebb lesz, és részletesen részletesen. A legfontosabb dolog az, hogy nemcsak az általános bemutatót és a kész példákat kapja, hanem a HTML háttérképének megértését is. A HTML háttérének beállításához használja a közbenső doktípust És elkezdem azzal a ténnyel, hogy HTML5. Nincs lehetőség a háttér hátterének beállítására. Ezt a funkciót úgy döntöttek, hogy elviselik a CSS-t. Ezért, ha az alábbiakban kívánja használni, és érvényes » (helyes) Kód, akkor a dokumentum átmeneti típusán kell maradnia. Ehhez a weblapnak a következő sorral kell kezdődnie: <! HTML Public "- // W3C // DTD HTML 4.01 » Átmeneti // en "http://www.w3.org/tr/html4/loose.dtd">>

A gyakorlati osztályok ideje

Hogyan van a háttér egy weboldalon? (#)Ha kitaláltad, menjünk meg, hogy megértsük, hogyan jön létre a háttér. És az első dolog itt meg kell jegyezni - ez a különbség

Háttérszín

Háttérkép

. Az elején megy

Háttérszín Bal: 50%; amely az összes elérhető oldalt vagy annak elemét árítja. Az ismételten háttérkép }

. Vizuálisan ez a következőképpen ábrázolható: Pozíció: abszolút; Top: 0;

HTML dokumentum és elemei háttere

Miután kiábrándodott a háttérirányú vezérlés fő elemei, valamint attribútumaik, közvetlenül egy adott példa elemzéséhez. Az alábbiakban bemutatott programkódban megpróbáltam engedélyezni az összes leírt elemet.

A második dolog, amit tudnod kell, a különbség a különbség

A dokumentum teste Jobb: 0; :

A dokumentum eleme

A dokumentum teste

A weboldal címke HTML kódjában szerepel

Test. amely magában foglalja a weboldal összes tartalmát. Nyilvánvaló, hogy a dokumentum dokumentumának háttere nem lehet átlátható. Ha a dokumentum testének háttere nincs megadva, a böngészőbeállításokban megadott alapértelmezett értéket használjuk. Oldalelemek a címkén belül vannak }

. Érdemes megjegyezni, hogy beállíthatja a színes és / vagy a háttérképet a HTML segítségével a dokumentum minden eleméhez. Például a háttérkép csak táblázatokra adható meg. Alapértelmezés szerint általában átlátszó háttérrel rendelkeznek. Pozíció: abszolút; Top: 0;

A BGColor attribútuma a háttérszín létrehozásához

Annak érdekében, hogy megkérdezzük

A dokumentum vagy annak elemei attribútumot használnak Magasság: 200%; и háttérkép bgcolor , például: <Body bgcolor = "# ec008c">

<! - dokumentum test ->

</ Body>

Ebben az esetben beállítottuk a háttérszínt az oldal egészére. De egy példa arra, hogyan kell beállítani a háttérszínt az asztalhoz, a címkén asztal <Table bgcolor = "# ec008c"> <tr> <td> szöveg háttérrel </ td> </ tr> </ asztal>

Érdemes megjegyezni, hogy a táblázat háttérszíne is megadható a címkék soraihoz

Tróf És a címkékhez TD.

Hogyan lehet megtalálni a színkódot? Valószínűleg már észrevette, hogy a html színe különleges kód Html , például:

# EC008C.

  • . Annak érdekében, hogy megtudja a kódot, szüksége van a színre, használhatja az egyik grafikus szerkesztőt. Például, a Photoshop használatával "
  • Eyedropper eszköz.
  • (Pipetta)

Hogy egy színt kapjon a képen lévő pontból. Ezután kattintson az eszköztárra és a megnyíló ablakra "

Színválasztó. (Színválasztás) Színkód másolása. Felhívom a figyelmet arra a tényre, hogy ez a kód rácsos jel nélkül lesz Kezdetben ezt a jelet kézzel kell hozzáadni.

Számos online szolgáltatást is használhat, például: 
A munka elvét még könnyebben kattintson a kívánt színre, és kapja meg a kódot. Attribútum háttér létrehozásához háttérkép Valamint a háttérszín és a
Különleges attribútumot kell használnia, nevezetesen 
háttér. 
<test háttér = "/ 2014/06 / bg.jpg">

В Html Ebben az esetben kérjük a háttérképet az oldal egészére. Érdemes megjegyezni, hogy a kép méretének korlátozása miatt megismétlődik, például: Ahogy látod, amikor ismétlés, a képek közötti átmenet észrevehető. Ezért gyakran használják a különleges képeket, ahol ez a pillanat figyelembe veszik. De egy példa arra, hogyan kell beállítani a háttérkép egy asztalra, a címke

<table background = "/ 2014/06 / bg.jpg"> <tr> <td> Szöveg háttérrel </ td> </ tr> </ táblázat> Html Érdemes megjegyezni, hogy a háttérkép csak az asztalhoz és / vagy a különálló cellájához állítható. Egy karakterlánchoz nem fog működni. Attribútum háttér létrehozásához háttérkép .

Abszolút és relatív út a háttérképhez (Színválasztás) Külön érdemes figyelmet fordítani Cím háttérkép . Ebben az esetben a kép relatív elérési útját használják, vagyis A cím a képfájl helyén szerepel a weboldal fájlba. Ezt az opciót nem lehet különösen sikeresnek hívni. A legjobb az abszolút útvonal használata a képhez, azaz

teljes URL-je <test háttér = "/ képek / bg.jpg"> .

Ebben az esetben nem lesz egyidejűleg problémák. További információért olvashat itt.

Összefoglaljuk 
Az attribútumok használata erkölcsileg elavult, mert a HTML-kód érvényességét az átmeneti Doctype.

. A HTML háttérszínének beállításához speciális kódokat használ, amelyeket egy grafikus szerkesztőben vagy speciális online szolgáltatások használatával találhat meg. A háttérkép megismétlődik a fedett terület farkain, és a háttérszín tetején fekszik. A háttérkép megadásához jobb a teljes URL-címét használni. Mindentem van. Kösz a figyelmet. Sok szerencsét!

Rövid link: http://goo.gl/03tsnz Hogyan készítsünk hátteret a webhelyre? Bármely szoba sokkal jobban néz ki, ha a padlója felemelkedik kedves perzsa szőnyegen. Szóval a rosszabb webhelyed? Talán itt az ideje és a padlója készlet
  • »Drága elegáns kézzel készített palota. Többet fogunk megérteni arról, hogyan készítsünk hátteret az oldalra:
  • Ez megtörténik, hogy a webhely régi kialakítása már jött. És szeretnék valami újat és ízletes. És az új design lesz olyan, ha saját kezével főzzük.
  • De hogy teljesen megváltoztassa az erőforrás minden tervezését - a dolog hálátlan. Igen, és nem mindenkinek van valami erről.
  • élesített

"Kezek. Ezért a legegyszerűbb frissíteni a régi sablont, megváltoztatja az erőforrás hátterének színét vagy a háttérképét.

Számos módja van a háttér hátterének megváltoztatására. Ez lehetőséget használ. 
CSS. vagy . De sok a tulajdonságokat dolgozik a háttérben ugyanaz a neve, és az alkalmazás módszerének ezekben webes technológiákat.
  • Háttérként több elemet is használhat: Szín; ;
  • Háttérkép;
  • Texturális kép. Mindegyikük részletesebben foglalkozunk. Annak érdekében, hogy a helyszín hátterének színét állítsa be, az ingatlant használják.

háttérszín.

Stílus attribútum 

Stílus. . Ez azt jelenti, hogy beállítsa az alap színe a weblapon, akkor regisztrálnia kell a <body> tag. Például: <Body style = "háttérszín: # 55d52b"> <p> a webhely háttere # 55d52b </ p> </ body>

A hexadecimális színkód mellett az érték támogatott a kulcsszóformátumban vagy

RGB. 

. Példák:

<Body Style = "Háttérszín: RGB (51,25553)"> <p> Az RGB weboldalának háttere (23,113,44) </ p> </ body> <Body Style = "Háttérszín: zöld"> <p> A zöld webhely háttere </ p> </ body> A háttérszín használata kulcsszavakkal számos korlátozással rendelkezik a fennmaradó két módon.

A színének beállítása 16 kulcsszó támogatott. Itt van néhány közülük:

Fehér, piros, kék, fekete, sárga Egyéb. Ezért, annak érdekében, hogy állítsa be a webhely hátterét

Jobb, ha hexadecimális formátumot használunk 

A szín kiválasztása mellett más beállítások is rendelkezésre állnak. Ha tulajdonság Érték beállítása Átlátszó

Az oldal háttere átláthatóvá válik. Ezt az értéket alapértelmezés szerint hozzárendeli ehhez a tulajdonsághoz. Most tekintse meg a hypertext nyelv lehetőségeit a webhely háttérmintájának telepítéséhez. Lehetőség van az ingatlan használatára. háttérkép.

Példa: 

<Body Style = "Háttérkép: URL (IMG_1809.jpg)"> </ Body>

Amint a kódból látható, a képkötés az útvonalon keresztül történik

Url

Zárójelben. De nem minden kép úgy tűnik, hogy olyan nagy, hogy kitöltse a képernyő teljes területét a méretükkel. Lássuk, hogyan jelenik meg a kisebb szám.

Tegyük fel, hogy fejlesztünk egy helyet a költészetről, és szubsztrátként a Pegasus képét kell használni. A szárnyas ló személyre szabja a kreatív gondolkodás szabadságát a költőre!

Szükségünk van arra, hogy a kép megjelenik a képernyő közepén. De sajnálatos módon a böngésző nem érti a nagyszerű vágyainkat. És egy kisebb képet jelenít meg a webhely hátterére annyiszor, amennyit a képernyő területének befogadására alkalmas:

Valószínűleg négy, mosolygós lovak vannak a költőkkel, túl sok az inspirációhoz. Ezért megtiltja Pegasusunk klónozását. Tedd az ingatlan használatával

Háttér ismétlés. . Lehetséges értékek: Ismétlés-X - A háttérkép vízszintes ismétlése;

Tehát megkönnyítjük a feladatot, hogy a hátsó hátteret két képből állítsuk be: animáció és rendszeres kép. Ebben az esetben a GIF animáció rögzítendő, és a rajzot az oldal tartalmával együtt görgetjük.

Ismétlődő - függőlegesen;

Ismételje meg - mindkét tengelyen;

Nem ismétlődő - ismétlés tilos.

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

<Body Style = "Háttérkép: URL (3.jpg); Háttér-ismétlés: NO-REPEAT"> </ BODY>

De természetesen jobb, ha a letétünk a képernyő közepén található. Ingatlan

Hátterület Csak a háttérmintát az oldalra helyezi. Állítsa be a helyszín koordinátáit többféleképpen:
. Ez azt jelenti, hogy beállítsa az alap színe a weblapon, akkor regisztrálnia kell a <body> tag. Például: Kulcsszó (
<test háttér = "/ képek / bg.jpg"> Felső, alsó, központ, bal, jobb)
vagy Százalékok - A visszaszámlálás a bal felső sarokban kezdődik;
Bármely szoba sokkal jobban néz ki, ha a padlója felemelkedik kedves perzsa szőnyegen. Szóval a rosszabb webhelyed? Talán itt az ideje és a padlója Mértékegységekben (
(Színválasztás) Képpontok
). A legegyszerűbb opciót használja a központosításhoz:

<Body Style = "Háttérkép: URL (3.JPG); Háttér ismétlés: No-Repeat; Háttér-pozíció: Top Center"> </ Bode>

Ez megtörténik, hogy meg kell erősítenie a rajz helyzetét görgetés közben. Ezért, mielőtt képet készítene a webhelyről, használjon különleges tulajdonságot.

Háttérképzés.

. Érvényes értékek: <ul> <li> Görgetés; </ li> <li> fix. </ Li> </ ul>

Szükségünk van az utolsó jelentésre. Most a példánk kódja így fog kinézni: [/ html] 
<Body Style = "Háttérkép: URL (3.jpg); Háttér-ismétlés: NO-REPEAT; Háttér-pozíció: Top Center; Háttér-rögzítés: fix"> </ Bode> 

Az első példában a háttérben nagy és gyönyörű sivatagi tájat használtunk. De ilyen szépségért kell fizetnie. A kiváló minőségben végzett kép súlya több megabájt is elérhet.

Ez a kötet nem befolyásolja a böngésző oldal letöltési sebességét nagysebességű kapcsolat az interneten. De mi van a mobil interneten, amikor több "letöltést használ"

méter

- Sok időt vesz igénybe?

- Sok időt vesz igénybe? Mindezek a problémák megoldhatók egy textúra háttér használatával. Egy kis képet használ, mint a textúra mintázatát. Még a többszörös ismétlés állapota alatt is, a minta csak egyszer van betöltve.

Sötét háttér létrehozása az oldalhoz Test. Photoshop. Test. , Hozzon létre egy képet egy hosszú 1200 pixeles csík formájában és 15 képpont szélességében. Ezután egyszerű fekete-fehér gradienset használunk, és csatlakoztatjuk a kapott textúrát az oldaloldalhoz:

<Body Style = "Háttérkép: URL (1.png); Szín: RGB (0,51,204)"> </ body>

Az egyértelműség érdekében szöveget adtunk hozzá, és színt állítottunk be az ingatlan használatával. Test. Szín Test. . Ez történt:

  • Magasság: 200%; A fent leírt összes tulajdonság is alkalmazható a lépcsőzetes stíluslapokra. Hozzon létre egy webhely hátterét
  • háttérkép CSS.
  • Az egyik korábbi példáink kódjának átírásával: <Fej> <Cím> Dokumentum Untitled </ Cím> <Style Type = "Text / CSS"> Body {Background kép: URL (3.jpg); Háttér-ismétlés: nincs ismétlés; Háttér-pozíció: felső részének közepén, háttér-attachment: fixed;} </ style> </ head> <body> </ body>
  • Az eredmény hasonló lesz. Nos, megnéztük az összes lehetőséget, hogyan kell megváltoztatni a háttér hátterét. Most csak a jövőbeli szőnyeg rajzolására van szükség, és elterjeszti az erőforrás oldalain. De ez a kezed.
  • Jó nap mindenkinek, hogy tanuljon és tanuljon valami újdonságot! Előfordult már odafigyelt a megjelenése helyszínek fejlesztése során az alkotók már lusta, hogy gondoskodjon a háttérben oldalakat? És megfordultam. Úgy néz ki, vágás. Gyakran a különböző típusú információk közötti szokásos elválasztások hiánya miatt vegyes, és egyszerűen eltűnik a vágy, hogy tovább nézzen egy ilyen webes erőforrás. Annak érdekében, hogy ilyen baj történt a projekteddel, úgy döntöttem, hogy cikket írok a témáról: "Hogyan készítsünk hátteret a HTML-ben." Miután elolvasta a kiadvány, megtudhatja, milyen eszközökkel lehet beállítani a háttér kialakítása, hogy hogyan lehet a háttérben rögzített vagy változó és még sok más, ami segít, hogy a webhely vonzó. Most kezdjük el!
  • Alapvető eszközök a háttér weboldalak beállításához A háttérkép beállításához a webes nyelvi fejlesztők egy attribútumot biztosítottak. Mind a HTML, mind a CSS-ben kapható.
  • A jelölőnyelven ez a testcímke attribútuma, és a stílus asztalok - egy univerzális tulajdonság, amely lehetővé teszi, hogy akár 5 jellemzője a hátsó terv egyidejűleg. A háttér meglehetősen rugalmas elem, amely a háttér színét, színes képet vagy akár animációt végezhet. Tehát, hogy a háttérképet a HTML <test> egységen keresztül telepítse, elegendő egy ilyen kód írása:
  • <Body Background = "Fájlcím"> ... </ Body> És a "fájlcím" szavak helyett helyezze be a kép elérési útját.
  • Értesítés azonban! Ha a háttér formájában szeretne látni egy Monochon vászonot a színpalettából, akkor ez a BGColor attribútum használatával történik. Például <body bgcolor = "# 000000"> ... </ Body>, megkérdeztük a fekete hátteret a webhelyünk számára.
  • A CSS és HTML színeket egy angol szó (például piros), vagy egy speciális kódot tartalmaz, amely egy jel # és hat karakterből áll (például, # FFDAB9). Amikor egy második opciót írunk a speciális szoftvertermékek fejlesztői számára, a paletta automatikusan megjelenik az Ön előtt. Ha csak elkezdte tanulni ezeket a webes nyelveket, akkor a színkódot az interneten lehet eldobni.

Háttér, mint az ingatlan a lépcsőzetes stílustáblákban Magasság: 200%; :

A CSS stílusokkal vagy a <Style> elemen külön fájlban van beállítva. Ezzel a tulajdonsággal telepítheti a háttérmintákat vagy a színt, adja meg az oldal kiindulási helyét, az ismétlődő és rögzített képeket. A nagyobb tisztaság érdekében meghatároztam a táblázatban. 

Paraméterek Célja

Egy rögzített vagy gördülő kép telepítésére szolgál a webhely tartalmával együtt. Előfordul, hogy rögzített, görgessen és örökölje

Beállítja a háttérképet. Ez egyidejűleg jelezhető a színnel. Ezután az utóbbi megjelenik, amíg a kép teljesen betöltődik.

Beállítja az objektum első helyét az előző paraméterhez. Vízszintesen jelzi a jobb, a bal és a központot, a függőlegesen - alsó, felső és központot. Ezenkívül örökölheti a pozíciót (öröklést), százalékban, pixelben és más méretekben 

Alkalmazza a háttérkép attribútum használatakor. Szabályozza, hogyan fogják megismételni a képet. Meghatározhat 2 értéket: vízszintes és függőleges. Vannak jellemzők: nincs ismétlés, ismétlés, ismétlés-x, ismétlődő, öröklés, tér

Добавить комментарий