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. Ebben az esetben a fájl elérési útja idézőjelben (dupla vagy egyszeres) és anélkül is írható. none Törli 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
internet böngésző egészen a 7.0-s verzióig hátteret alkalmaz a hasLayout tulajdonsággal rendelkező elem szegélyének belsejére. Ha az elem nem rendelkezik hasLayouttal, akkor a background-image tulajdonság tiszteletben tartja az elem határait, a specifikációban meghatározottak szerint. A renderelés különbsége akkor lesz észrevehető, ha a szegélyek szaggatottak (szaggatottak vagy pontozottak), nem pedig tömörek.
Ha az elem görgetésre vagy automatikusra van állítva, az Internet Explorer 8 egy pixel függőleges késleltetéssel rendelkezik, amikor a háttér görget.
Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.
Ha a háttér egy táblázatsorhoz van beállítva (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Eredmény ezt a példát ban ben Chrome böngészőábrán látható. egy. internet böngésző Az Explorer, Opera és Firefox megfelelően megjeleníti a sor hátterét (2. ábra).
Rizs. 1. Ismételje meg a hátteret minden cellához
Rizs. 2. Háttér az egész sorhoz
És itt elérkeztünk a lényeghez, fogalmazzuk át így: "Az oldal a háttérből indul." A legtöbb blogger "klasszikus blogokat" készít fehér háttérrel, de mi másfelé fogunk menni. Sétáljon el egy csodálatos ingatlan mellett css háttér-kép, nem tehetjük.
És mit csinál? Ez az ingatlan css háttér-kép beszúr egy képet háttérként különböző elemekbe HTML- oldalak. Nem korlátozódik a címkére. test, és széles körben használják a webhelyek tervezésében, például: div, li, p, táblázat, fejléc, lábléc.
Vegyünk egy példát:
A weboldal tervezése a háttérrel kezdődik.
Helyes lesz beállítani a háttér színét - tulajdonság háttérszín, biztosításhoz, ha nem töltődik be a kép. zárójelben url() adja meg a képeket tartalmazó mappa elérési útját.
Alapértelmezés szerint a kép "mozaikszerűen" ismétlődik, amíg ki nem tölti a teljes böngészőképernyőt, ahogy lefelé haladunk az oldalon, a "csempénk" kitölti a második és a harmadik képernyőt is, csak addig, amíg az oldal tartalma véget nem ér. . Egyértelmű, hogy egy ilyen eredmény nem a tervezési ötlet csúcsa, és nem "fürdőszobánk" lesz, hanem csak egy blog, ahol az olvashatóság nagyon fontos szempont.
A "csempézés" egyszerű módja, ha nagyméretű, legalább 1024 px széles képet használunk, így az a teljes képernyőt kitölti. Az is lesz jó döntés megtalálja varrat nélküli textúra, melynek sokszorosítása során a kép egy egész lesz.
Hogyan lehet vonzóbbá tenni a hátteret?
Hála Istennek vannak ehhez segítőink:
- nem-ismétlés- az ismétlés letiltása
- ismételje meg x- a minta ismétlése csak vízszintesen
- ismétlés-y- a minta ismétlése csak függőlegesen
Például:
Blog fejléc
Ez egy háttértextúra, amely csak vízszintesen ismétlődik.
Következő segítő – ingatlan háttér pozíció, lehetővé teszi a pozicionálást háttér kép bárhol a képernyőn. Ez a megközelítés széles körben elterjedt modern web design. Képünk van, de nem része a tartalomnak, csak az oldal dekorációjaként szolgál.
fejléc
Példa egy nem ismétlődő háttérre meghatározott pozicionálással.
A kép csak egyszer jelenik meg, és a jobb oldalon található.
A jobb széltől a behúzás 200 képpontra van állítva, hogy elkerüljük a szöveg ütközését a háttérben.
Ha azt szeretnénk, hogy a kép mindig látható legyen a képernyő lefelé görgetése közben, akkor a fenti kódhoz hozzá kell adnunk egy tulajdonságot - háttér-csatolás: rögzített;
Mi a különbség között imgés háttérkép?
A különbség alapvető, tag img közvetlenül a testbe helyezve HTML-oldalak és felelős a tartalomért (illusztrációk, fényképek, avatarok), szemantikai terhelést hordoz. Nagyon fontos, hogy a kép indexelve legyen kereső motorokés beszállt Keresési eredmények. Tulajdonságok css háttér-kép- egyedivé és széppé tenni az oldalt, vagyis ezt a dizájnt érdemes külső fájlba vinni css stílusokat vagy egy elemen belüli felhasználást stílus.
Ez persze nem azt jelenti háttérkép nem fog működni, ha a testbe helyezik HTML- oldalak. De erősen ajánlom, hogy mindent, ami a tervezéssel kapcsolatos, vegyék ki css. Ennek eredményeként tisztaságot kapunk HTML-a kód:
- ez pozitívan befolyásolja a webhely indexelését, a keresőrobotok szeretni fogják az Ön webhelyét, és gyakrabban látogatják.
- látogatói is elégedettek lesznek, a kis súly miatt gyorsabban töltődik be az oldal.
- webmesterként könnyebben dolgozhat tiszta kóddal.
Nos, többé-kevésbé minden lehetőséget átgondoltunk az ingatlan használatára css háttér-kép. További gyakorló barátok! Nyugodtan másold ki a kódot, és találd ki a saját lehetőségeidet!
Szerintem nincs olyan oldal, ahol ne használnák az ingatlant css háttér. Úgy tűnik, mi lehet egyszerűbb ennél a tulajdonságnál? De nem, a képességei sokkal szélesebbek, mint az oldal háttereként szokásos kép vagy szín beállítása. Néhányan ismerősek lesznek, mások pedig sokak számára újak. Mindenesetre hasznos lesz alaposan megismerni a háttér működését.
A CSS3 sok újdonságot hozott az ingatlanba, mint például az átlátszóság, több kép háttérként való beállítása, de erről alább szó lesz, de először a tulajdonság alapjaira térünk ki. háttér.
háttérszín
Biztos vagyok benne, hogy már többször elvégezte a háttérszín hozzárendelését. Ez többféle jelöléssel is megtehető: normál (a színnév használatos), hexadecimális vagy RGB jelöléssel. Mindegyik típus egyenértékű, használja azt, amelyik a legjobban tetszik. Igyekszem a legrövidebb verziót használni, és az érzékelés szempontjából egyszerűbb, a stílusfájl pedig 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 bevezeti az átlátszóság támogatását, így hozzáadhatjuk a színünkhöz, így:
P (háttérszín: rgba(255, 0, 0, 0,5);)
Az utolsó számjegy az átlátszóságot 50%-ra állítja. Az átlátszóság értékét 0-tól állíthatja be (teljesen átlátszó háttér) 1-re (teljesen átlátszatlan).
háttérkép
Ezt a tulajdonságot is nagyon gyakran használják, lehetővé teszi, hogy képet rendeljen a háttérhez. A CSS3 lehetőséget ad több kép hozzárendelésére a háttérhez, mindegyik fajtaréteget hoz létre, így mindegyik átfedi az előzőt. Miért lehet ez hasznos? Minden nagyon egyszerű - tegyük fel, hogy apró dolgokat kell csavaroznia a webhely minden sarkába. Többé-kevésbé folyékony elrendezés esetén egyetlen kép használata nem lehetséges. Ezért készítünk 4 „réteget”, minden képet a saját sarkába helyezünk, és ennyi, a probléma megoldva
Törzs (háttér-kép: url("kép1"), url("kép2"), url("kép3"))
Ha egy képet kell a háttérhez rendelni, akkor csak az elsőt hagyjuk a kódban, ez szerintem érthető.
Ha bármilyen képet használ háttérként, két szabályt kell figyelembe venni:
- állítson be kontrasztos háttérszínt arra az esetre, ha a felhasználó valamilyen okból nem látja a képet. A képek megjelenítését gyakorlatilag letiltja, forgalmat takarít meg.
- ne használjon háttérképet annak közvetítésére fontos információ. A fent említett ok miatt előfordulhat, hogy a felhasználó nem látja.
A több háttérkép támogatása meglehetősen kiterjedt. Minden böngésző, még az IE8 is, támogatja ezt a tulajdonságot.
háttérkép:
Leírás
background-image tulajdonság(az angol "background image" - "background image" szóból) beállítja egy elem háttérképét.
jegyzet
A háttérkép beállításakor meg kell adni a háttérszínt is, amelyet akkor használunk, ha a kép nem érhető el. Ha elérhető egy kép, 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. Ez az alsó háttérképeket láthatóvá teszi a felső háttérképek átlátszó területein keresztül.
JavaScript
[objektum] .style .backgroundImage ="[érték]";
Böngésző támogatás
Leírás
Értékek
Minden érték CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Nincs Megadja, hogy nincs háttérkép. url(
background-image: url(sajatKép.png );
URL("
background-image: url("sajátKépem.png");
Inherit Megadja, hogy az elem örökölje a szülőelem beállításait.
Kezdő érték:"egyik sem".
Használati példa
Kódlista
háttérkép
Több háttérképet tartalmazó dokumentum.
Objektummodell
document.getElementById("elementID ").style.backgroundImage
Böngészők
Az Internet Explorer 7.0-s verzióig (beleértve a verziót) hátteret alkalmaz a hasLayout tulajdonsággal rendelkező elemek szegélyének belső oldalára. 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 (szaggatottak vagy pontozottak), nem pedig tömörek.
Ha az elem görgetésre vagy automatikusra van állítva, az Internet Explorer 8 egy pixel függőleges késleltetéssel rendelkezik, amikor a háttér görget.
Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.
Ha a háttér egy táblázatsorhoz van beállítva (tag
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. A böngésző Internet Explorer, Opera és Firefox megfelelően jeleníti meg a sor hátterét (2. ábra).
Rizs. 1. Ismételje meg a hátteret minden cellához
Rizs. 2. Háttér az egész sorhoz