háttérkép: | egyik sem; háttérkép: | nincs | örököl; háttérkép: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | egyik sem

Leírás

Háttérkép tulajdonság(angolul "háttérkép" - "háttérkép") beállítja az elem háttérképét.

jegyzet

Háttérkép beállításakor meg kell adnia azt a háttérszínt is, amelyet akkor használnak, ha a kép nem érhető el. Ha rendelkezésre áll egy kép, az a háttérszín felett jelenik meg. (Így a szín látható lesz a kép átlátszó részein).

Használati feltételek

A CSS3 -tól kezdve (vesszővel elválasztva) egyszerre több háttérképet is megadhat. Így az alsó háttérképek láthatóvá válnak a felső háttérképek átlátszó területein.

JavaScript

[objektum] .stílus .backgroundImage = "[érték]";

Böngésző támogatás

Leírás

Az értékek

Minden érték CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Nincs Azt jelzi, hogy nincs háttérkép. url ( ) Megadja a kép URI karakterláncát az "url (...)" -ben.

háttérkép: url (myImage.png);

URL (" ") Megadja a kép URI karakterláncát az" url (...) "-ben, és az URI karakterláncot DOUBLE QUOTE" "" karakter jelöli.

háttérkép: url ("myImage.png");

Öröklés Azt jelzi, hogy az elemnek örökölnie kell a szülőelem paramétereit.

Kezdő érték:"Egyik sem".

Használati példa

Kódlista

Háttérkép

Több háttérképet tartalmazó dokumentum.

> Háttérkép tulajdonság>

A weboldal tervezése háttérrel kezdődik.

Helyes lesz előírni a háttérszínt - tulajdonságot háttérszín, biztonsági háló esetén, ha a kép nem töltődik be. Zárójelben url () adja meg a képekkel ellátott mappa elérési útját.

Alapértelmezés szerint a kép "cserépként" ismétlődik, amíg el nem tölti a teljes böngészőképernyőt, miközben lefelé haladunk az oldalon, a "csempe" mind a második, mind a harmadik képernyőt kitölti, amíg az oldal tartalma véget ér . Nyilvánvaló, hogy egy ilyen eredmény nem egy tervezési ötlet magassága, és nem lesz "fürdőszobánk", hanem csak egy blog, ahol az olvashatóság nagyon fontos szempont.

A "csempézéstől" való megszabadulás egyszerű módja egy nagy, legalább 1024 px széles kép használata, hogy az kitöltse a teljes képernyőt. Szintén jó megoldás lesz a zökkenőmentes textúra megtalálása, ha megszorozzuk, a kép egy egész lesz.

Hogyan lehet vonzóbbá tenni a hátteret?

Hála Istennek ehhez vannak segítőink:

• nem-ismétlés- az ismétlés letiltása
• ismétlés-x- a minta ismétlése csak vízszintesen
• ismételje-y- a minta ismétlése csak függőlegesen

Például:

Blog fejléce

Ez a háttér textúra csak vízszintesen ismétlődik.

A következő segítő az ingatlan háttér-pozíció, lehetővé teszi a háttérkép elhelyezését a képernyő bármely pontján. Ez a technika elterjedt a modern webdesignben. Van képünk, de ez nem része a tartalomnak, hanem csak az oldal díszítéseként szolgál.

Cím

Példa egy nem ismétlődő háttérre egy adott pozicionálással.

A kép csak egyszer jelenik meg, és a jobb oldalon található.

A jobb oldali behúzás 200 képpontra van állítva, hogy elkerülje a szöveg ütközését a háttérrel.

Ha azt szeretnénk, hogy a kép mindig látható legyen, amikor lefelé görgetünk a képernyőn, hozzá kell adnunk a tulajdonságot a fenti kódhoz - háttér-melléklet: rögzített;

Mi a különbség imgés háttérkép?

A különbség alapvető, címke img közvetlenül a testbe helyezve Html-oldalak és felelős a tartalomért (illusztrációk, fényképek, avatárok), szemantikai terhelést hordoz. Nagyon fontos, hogy a képet a keresőmotorok indexeljék, és bekerüljenek a keresési eredményekbe. Tulajdonságok CSS háttérkép- tegye egyedivé és gyönyörűvé az oldalt, vagyis ezt a dizájnt, amelyet ki kell venni egy külső fájlba CSS stílusok vagy elemen belüli használat stílus.

Természetesen ez nem jelenti azt háttérkép nem működik, ha a testbe helyezik Html-oldalak. De határozottan javaslom, hogy vegyenek ki mindent, ami a tervezéssel kapcsolatos CSS... Ennek eredményeként tiszta lesz Html-kód:

• ez pozitív hatással lesz a webhely indexelésére, a keresőrobotok imádni fogják webhelyét, és gyakrabban látogatják azt.
• látogatói is elégedettek lesznek, az oldal kis súlya miatt gyorsabban betöltődik.
• Ön, mint webmester, könnyebben dolgozhat tiszta kóddal.

Nos, többé -kevésbé minden lehetőséget megvizsgáltunk az ingatlan használatával CSS háttérkép... További gyakorló barátok! Nyugodtan másolja le a kódot, és találja meg a saját lehetőségeit!

rövid info

CSS verziók

Az értékek

url Az érték a grafikus fájl elérési útja, amely az url () konstrukcióban van megadva. Ebben az esetben a fájl elérési útja írható idézőjelbe (kettős vagy egyszeri), vagy anélkül. none Törli az elem háttérképét. örököl Az érték öröklődik a szülőtől.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektum modell

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

Böngészők

Az Internet Explorer 7.0 vagy újabb verzió hátteret alkalmaz a hasLayout tulajdonsággal rendelkező elem szegélyén belül. Ha az elemnek nincs hasLayout elrendezése, a háttérkép tulajdonság tiszteletben tartja az elem határait a specifikációban meghatározottak szerint. A megjelenítési különbség észrevehető, ha a szegélyek szaggatott vagy pontozottak, nem pedig szilárdak.

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

Az Internet Explorer a 7.0 -ig bezárólag nem támogatja az öröklési értéket.

Ha a tábla sorához (címke) be van állítva a háttér ), akkor a Chrome, a Safari, az iOS nem jeleníti meg a specifikációban előírtak szerint, nevezetesen minden cellára külön -külön. Míg a böngészőnek szilárd hátteret kell mutatnia az egész sor számára. A 2. példa a hibát bemutató kódot mutatja.

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, az Opera és a Firefox böngésző helyesen jeleníti meg a sor hátterét (2. ábra).

Rizs. 1. A háttér megismétlése minden cellánál

Rizs. 2. A teljes sor háttere

rövid info

CSS verziók

Az értékek

url Az érték a grafikus fájl elérési útja, amely az url () konstrukcióban van megadva. Ebben az esetben a fájl elérési útja írható idézőjelbe (kettős vagy egyszeri), vagy anélkül. none Törli az elem háttérképét. örököl Az érték öröklődik a szülőtől.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektum modell

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

Böngészők

Az Internet Explorer 7.0 vagy újabb verzió hátteret alkalmaz a hasLayout tulajdonsággal rendelkező elem szegélyén belül. Ha az elemnek nincs hasLayout elrendezése, a háttérkép tulajdonság tiszteletben tartja az elem határait a specifikációban meghatározottak szerint. A megjelenítési különbség észrevehető, ha a szegélyek szaggatott vagy pontozottak, nem pedig szilárdak.

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

Az Internet Explorer a 7.0 -ig bezárólag nem támogatja az öröklési értéket.

Ha a tábla sorához (címke) be van állítva a háttér ), akkor a Chrome, a Safari, az iOS nem jeleníti meg a specifikációban előírtak szerint, nevezetesen minden cellára külön -külön. Míg a böngészőnek szilárd hátteret kell mutatnia az egész sor számára. A 2. példa a hibát bemutató kódot mutatja.

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, az Opera és a Firefox böngésző helyesen jeleníti meg a sor hátterét (2. ábra).

Rizs. 1. A háttér megismétlése minden cellánál

Rizs. 2. A teljes sor háttere

Úgy gondolom, hogy nincs olyan webhely, ahol ne használnák az ingatlant CSS háttér... Úgy tűnik, mi lehet egyszerűbb, mint ez a tulajdonság? De nem, képességei sokkal szélesebbek, mint a kép vagy szín szokásos célja, mint az oldal háttere. Valami ismerős lesz, de valami biztosan újdonság lesz sokak számára. Mindenesetre hasznos lesz alaposan megismerni a háttér működését.

A CSS3 sok újdonságot hozott az ingatlanba, ez az átláthatóság és több kép háttérként való hozzárendelése, de erről alább beszélünk, és először nézzük meg a tulajdonság alapjait. háttér.

háttérszín

Biztos vagyok benne, hogy már többször elvégezte a háttérszínek hozzárendelését. Ezt többféle jelöléssel is meg lehet tenni: rendes (színnév használatos), hexadecimális vagy RGB jelölés. Minden típus egyenlő, használja azt, amelyik a legjobban tetszik. Próbálom a legrövidebb verziót használni, és a felfogás szerint egyszerűbb, és a stílusfájl egy kicsit kisebb méretű.

P (háttérszín: piros;) p (háttérszín: # f00;) p (háttérszín: # ff0000;) p (háttérszín: rgb (255, 0, 0;))

A CSS3 támogatja az átláthatóságot, így hozzáadhatja azt a mi színünkhöz is, így:

P (háttérszín: rgba (255, 0, 0, 0,5);)

Az utolsó számjegy 50% -os átlátszóságra lett állítva. Beállíthatja az átlátszóság értékét 0 (teljesen átlátszó háttér) és 1 (teljesen átlátszatlan) között.

háttérkép

Ezt a tulajdonságot is nagyon gyakran használják, lehetővé teszi egy kép hozzárendelését a háttérhez. A CSS3 lehetővé teszi több kép hozzárendelését a háttérhez, amelyek mindegyike egyfajta réteget hoz létre, így minden következő kép az előzőre kerül. Miért lehet ez hasznos? Minden nagyon egyszerű - tegyük fel, hogy rögzítenie kell az apróságokat a webhely minden sarkában. A többé -kevésbé folyékony elrendezés biztosítása, egy kép használata nem opció. Ezért 4 "réteget" készítünk, minden képet a saját sarkába mozgatunk, és ennyi, a probléma megoldódott

Törzs (háttérkép: url ("kép1"), url ("kép2"), url ("kép3"))

Ha egy képet kell hozzárendelni a háttérhez, akkor csak az elsőt hagyjuk a kódban, szerintem ez érthető.
Ha bármilyen képet háttérként használ, két szabályt kell szem előtt tartania:

• állítson be kontrasztos háttérszínt arra az esetre, ha a felhasználó valamilyen okból nem tudja megjeleníteni a képet. Kikapcsolhatja a kép megjelenítését, mentheti a forgalmat.
• ne használjon háttérképet semmilyen fontos információ továbbítására. A fenti okok miatt előfordulhat, hogy a felhasználó nem látja.

A több háttérkép támogatása elég széles. Minden böngésző, még az IE8 is támogatja ezt a tulajdonságot.