A szerzőtől:Üdvözlök mindenkit. A háttérszíneknek és a képeknek óriási szerepük van a webdesignban, mivel lehetővé teszik az elemek vonzóbb megtervezését. Ma megvizsgáljuk, hogyan lehet hátteret készíteni html-ben.
Háttérkép beállításakor lehet html-vel kijönni?
Rögtön el kell mondanom, hogy nem. A html-t általában nem weblapok stílusára tervezték. Csak nagyon kellemetlen. Például van egy bgcolor attribútum, amellyel beállíthatja a háttér színét, de ez nagyon kellemetlen.
Ennek megfelelően lépcsőzetes stíluslapokat (css) fogunk használni. Sokkal több lehetőség áll rendelkezésre a háttér beállításához. Ma elemezzük a legalapvetőbbeket.
Hogyan állíthatom be a hátteret a css-n keresztül?
Tehát először is el kell döntenie, hogy melyik elemre kell beállítania a hátteret. Vagyis meg kell találnunk azt a választót, amelyre felírjuk a szabályt. Például, ha a hátteret be kell állítani az egész oldal egészére, akkor ezt megteheti a törzsválasztóval, az összes blokknál - a div választóval. Nos, stb. A hátteret bármely más szelektorhoz lehet és kell kötni: stílusosztályok, azonosítók stb.
Miután eldöntötted a választót, meg kell írnod magának a tulajdonságnak a 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. Utána kettőspontot kell tennie, és meg kell írnia magát a színt. Ezt különböző módon lehet megtenni. Például kulcsszavak, hex kód, rgb, rgba, hsl formátumok használatával. Bármely módszer megteszi.
A leggyakrabban használt módszer a hexadecimális kód. A színillesztéshez használhat olyan programot, amelyben a színkód látható. Például photoshop, paint vagy valamilyen online eszköz. Ennek megfelelően például írok egy általános hátteret a teljes weboldalra.
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 neki egyértelmű 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: 400px; magasság: 250px; 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 egy html elem háttereké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 elérési út meghatározása azon a tényen alapul, 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 a kép nevét, ha az útvonalat és a kiterjesztést helyesen adta meg. Ezek a legtöbbek gyakori okok az a tény, hogy a háttér egyszerűen nem jelenik meg, mivel a böngésző nem találja meg a képet.
De észrevettél egy sajátosságot? A böngésző az egész blokkban elkészítette és reprodukálta a képet. Tehát, hogy tudd, ez a háttérképek alapértelmezett viselkedése - függőlegesen és vízszintesen ismételnek, amíg be nem férnek a blokkba. Könnyedén irányíthatja ezt a viselkedést. Ehhez használja a background-repeat tulajdonságot, amelynek 4 fő értéke van:
Ismétlés - alapértelmezett érték, a kép megismétlődik mindkét oldalon;
Repeat-x - csak az ois x esetén ismétlődik;
Ismétlés-y - csak az y tengely mentén ismétlődik;
No-repeat - egyáltalán nem ismétel;
Írhat minden értéket, és megnézheti, mi történik. Így fogom írni:
háttérismétlés: ismétlés-x;
háttér - ismétlés: ismétlés - x; |
Most ismételje meg csak vízszintesen. Ismétlés nélkül csak egy kép lenne.
Remek, ezt már befejezheti, mivel ezek a háttérrel való munka alapvető lehetőségei, de megmutatok még 2 tulajdonságot, amelyek lehetővé teszik, hogy jobban ellenőrizhesse ezt.
Az ismétléssel az elrendező tervezők háttér textúrákat és színátmeneteket kaptak egy apró kép felhasználásával. Lehetett 30 x 10 pixel vagy kevesebb. Talán még egy kicsit. A kép olyan volt, hogy amikor az egyik vagy akár mindkét oldalon megismétlődött, nem látszottak átmenetek, így ennek eredményeként egyetlen szilárd háttér keletkezett. Egyébként ezt a megközelítést érdemes most alkalmazni, ha a webhelyén zökkenőmentes textúrát szeretne háttérként használni. Ma a gradiens már megvalósítható css3 módszerekkel, erről mindenképpen beszélünk.
Háttér helyzet
Alapértelmezés szerint a háttérkép, ha nincs megismételve, a blokk bal felső sarkában lesz. De a helyzet könnyen megváltoztatható a background-position tulajdonság segítségével.
Különböző módon kérdezheti meg. Az egyik lehetőség az, hogy egyszerűen meg kell jelölni azokat az oldalakat, amelyeken a képnek elhelyezkednie kell:
háttér-helyzet: jobb felső;
háttér - helyzet: jobb felső; |
Vagyis függőlegesen minden a régiben marad: a háttérkép felül helyezkedik el, vízszintesen azonban az oldalt jobbra, vagyis jobbra változtattuk. A pozíció beállításának másik módja százalékos arány. Ebben az esetben a visszaszámlálás mindenképpen a bal felső saroktól kezdődik. 100% - az egész blokk. Így, hogy a képet pontosan a közepére helyezzük, így írunk:
háttérpozíció: 50% 50%;
háttér - pozíció: 50% 50%; |
Ne felejtsen el egy fontos dolgot a pozicionáláshoz kapcsolódóan - az első paraméter mindig a vízszintes helyzet, a második pedig a függőleges helyzet. Tehát, ha látja a 80% 20% értéket, akkor azonnal arra a következtetésre juthat, hogy a háttérkép erőteljesen jobbra tolódik, de nem sokat fog lemenni.
És végül megadhatja a pozíciót pixelben. Minden ugyanaz, de% helyett pix lesz. Bizonyos esetekben erre a helyzetre is szükség lehet.
Rövidített jelölés
Egyetért abban, hogy a kód meglehetősen nehézkesnek bizonyul, ha minden úgy van beállítva, ahogy mi tettük. Kiderült, hogy be kell állítani a képhez vezető utat, az ismétlést és a pozíciót. Természetesen az ismétlés és a helyzet nem mindig szükséges, de mindenesetre helyesebb a gyorsírás tulajdonság jelölését használni. Ez így néz ki:
háttér: # 333 url (bg.jpg) nem ismételhető 50% 50%;
háttér: # 333 url (bg.jpg) nem ismételhető 50% 50%; |
Vagyis az első lépés az általános szilárd háttérszín rögzítése, ha szükséges. Ezután a képhez vezető út, az ismétlés és a helyzet. Ha valamilyen paraméterre nincs szükség, akkor egyszerűen kihagyjuk. Egyetértek, ez sokkal gyorsabb és kényelmesebb, és a kódunkat is jelentősen csökkentjük. Általában azt tanácsolom, hogy mindig rövidítésekkel í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 megfelelő a következő trükkhöz, ezért veszek egy másikat. Méretében legyen olyan, mint egy tömb, vagy nagyobb nála. Tehát képzelje el, hogy szembe kell néznie egy feladattal: készítsen háttérképet úgy, hogy az ne töltse ki teljesen a blokkját. A kép például még nagyobb is, mint a blokk mérete.
Mit tehet ebben az esetben? Természetesen a legegyszerűbb és ésszerűbb megoldás a kép egyszerű csökkentése lenne, de ezt nem mindig lehet megtenni. Tegyük fel, hogy a szerveren és benne fekszik Ebben a pillanatban csökkentésére nincs idő vagy lehetőség. A probléma megoldható a háttérméret tulajdonság használatával, amelyet viszonylag újnak lehet nevezni, és amely lehetővé teszi a háttérkép, sőt bármely háttér méretének manipulálását.
Szóval, a képem most a blokkban lévő összes helyet elfoglalja, de háttérméretet adok neki:
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ó a blokk szélességének 80% -át kapta szélességében és felét magasságban. 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. Tehát vigyázzon, ne lépjen ki az arányokból.
Mint sejteni lehet, a háttér mérete pixelben is megadható. Két jelentésű kulcsszó is használható:
Borító - a kép úgy lesz méretezve, hogy legalább az egyik oldala teljesen kitöltse a blokkot.
Contain - méretez, úgy, hogy a kép maximálisan beleférjen a blokkba.
Ezeknek az értékeknek az az előnye, hogy nem változtatják meg a kép képarányát, és ugyanazok maradnak.
Azt is meg kell értenie, hogy a kép nyújtása minőségének romlásához vezethet. Mondhatok egy példát a tervezők életéből és valós gyakorlatából. Mindenki tudja és megérti, hogy az asztali számítógépek kódolásakor hozzá kell igazítania a webhelyet a monitorok fő szélességéhez: 1280, 1366, 1920. Ha mondjuk 1280 x 200 méretű háttérképet készít, és nem állítja be háttérméret, majd a szélességű képernyők nagyobbak lesznek, üres hely jelenik 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 background-size: cover beállítást, hogy a kép mindig az ablak maximális szélességéig nyúljon. Ez egy jó trükk, amelyet használni kell, de most azzal a problémával szembesül, hogy az 1920 pixeles képernyőszélességű felhasználók nem optimális minőségű képet láthatnak.
Hadd emlékeztessem önöket, hogy a maximális szélességig fog kinyúlni. Ennek megfelelően a minőség automatikusan romlik. Csak a helyes döntés kezdetben nagyobb képet fog használni - 1920 pixel széles. Ezután a legszélesebb képernyőkön természetes méretben jelenik meg, másokon pedig egyszerűen csak lassan vágják le, ugyanakkor a háttérkép helyes megválasztásával ez nem befolyásolja az oldal megjelenését.
Általánosságban ez csak egy példa arra, hogyan lehet felhasználni a cikkben megszerzett ismereteket valódi elrendezések elkészítésekor.
Félig átlátszó háttér css-vel
Egy másik trükk, amely a css segítségével megvalósítható, a semi átlátszó háttér... Vagyis ezen a háttéren keresztül meg lehet majd nézni, mi áll a háttérben.
Példaként a teljes oldalt háttérképnek állítom be, amelyet korábban a példákban használtunk. A bg azonosítóval rendelkező blokkhoz, amelyen minden kísérletünket elvégezzük, a hátteret az rgba színformátummal állítjuk be.
Mint korábban mondtam, a css-ben sok formátum létezik a színek beállításához. Az egyik az rgb, meglehetősen 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 vörös, majd a zöld, majd a kék telítettsége. Az érték 0 és 255 közötti numerikus lehet. Ennek megfelelően az rgba formátum nem különbözik egymástól, csak még egy paramétert adunk hozzá - az alfa csatornát. Az érték 0 és 1 között lehet, ahol a 0 teljes átlátszóság.
Helló kedves olvasók a blog oldalon. Ma öt CSS-szabályt fogunk megvizsgálni, amelyek lehetővé teszik a Html bármely elemének hátterének beállítását - háttér-pozíció (kép, ismétlés, szín, melléklet). Nos, ne felejtsük el megemlíteni a Háttér összetett szabályt sem.
Ebben nincs semmi nehéz, de vannak bizonyos finomságok és árnyalatok, amelyeket tudnod kell és már kész sablon(ne felejtsd el, ami segít megnyitni minden terv összes csínját-bínját).
Hadd emlékeztessem önöket még egyszer, hogy ez a cikk egy sorozat része, és a legjobb lenne először elkezdeni a stílusjelölés elsajátítását, mégpedig egy cikkel arról, hogy mi a CSS, és mire fogyasztják, nos, majd kövesse a megadott sorrendben a hivatkozásban. Bár mindenesetre rajtad múlik, de most beszéljünk a háttér beállításáról.
Szín, háttérszín és háttérkép
Először nézzük meg, hogyan html szín elemek felhasználásával Css színszabályok... Valójában itt minden egyszerű. A szintaxis teljesen normális, és a színt annak megfelelően állíthatja be, ahogyan azt a hiperszöveg jelölő nyelvén végezték. Amint emlékszik, a kivonatjel (hash - "# fe35a3") után helyezve, vagy három számjegy használatával, ha az első megegyezik a második értékével, a harmadik a negyedikkel, jól, az ötödik pedig a hatodikkal (az "# aa33ff" színkód rövidíthető "a3f" -ként).
Ezenkívül a Html és a Css kódban lévő színek szavakként is ábrázolhatók (például "piros"), de leggyakrabban a hexadecimális kódot használják:
Szín: # 303
Példaként ezt a kis bekezdést ugyanolyan színnel színeztem, mint a fentieket (# 303). Most kissé eltér az összes többi bekezdés színétől (sötétebb), amelyet # 555-re állítottak be CSS fájláltalam használt WordPress témák... De a szín beállítása a színen keresztül meglehetősen egyszerű, de a háttérrel egy kicsit bonyolultabb lesz.
Így, háttér css-benöt szabály létezik, amelyek kívánság szerint egy csapatba egyesíthetők. Ha meg szeretné tekinteni őket, lépjen a W3C konzorcium jelenlegi specifikációjának oldalára, és keressen bármit a Háttér szóval:
- háttérszín - ez a szabály beállítja a háttér színét bármely HTML elemhez. Ebben használhatja akár a kódot, akár az árnyalat nevét, azaz. minden pontosan olyan, mint a szín használata során.
háttérkép - vele képet használhat háttérként (de mindenképpen olvassa el, mert a nehéz képek lelassítják az oldal betöltését), amelynek elérési útját az url () funkció adja meg.
Ha megnézi a specifikációt, akkor látni fogja alapértelmezett háttérszín bármely elem átlátszó lesz (a szabály alapértelmezett értéke "háttérszín: átlátszó"). Elemekben azonban alapértelmezés szerint nem lesz átlátszó, mivel ezek rendszerelemek, és mindenük másképp van, és eltér a hipertext jelölőnyelv szokásos címkéitől.
A háttérszín színe alapértelmezettként van megadva (hat vagy három számjegyű hexadecimális kód vagy szó):
Háttérszín: #FEFCDE
Például ennek a bekezdésnek a hátterét pontosan a háttérszínen keresztül állítják be, közvetlenül a fenti színkóddal.
A többi négy CSS-szabály csak a háttérképre vonatkozik, amely bármely Html elemhez beállítható, és ha szükséges, pontosan elhelyezhető. Melyik grafikus fájlt fogja használni, a segítségével beállítható háttérkép.
Ha megnézi a stílusjelölő nyelv specifikációját, látni fogja, hogy az alapértelmezett háttérkép "semmi" (azaz nem használ háttérképet). Nos, ha még mindig szüksége van rá, akkor az url () függvényben meg kell adnia az elérési útját:
Háttérkép: url (https: //site/image/comment_top_focus.gif);
Például ebben a bekezdésben egy háttérrel rendelkező grafikus fájlt használtam, amelynek elérési útját éppen fentebb írtam le. Láthatja, hogy az e bekezdés számára kijelölt teljes területet ismétlődő kép borítja, amely eredetileg így néz ki:
Azok. ha csak egy háttérkép-szabályt használ, amely jelzi a grafikus fájl elérési útját, ez a kép függőlegesen és vízszintesen is megsokszorozódik, amíg be nem fedi a weboldalon az adott Html elemhez rendelt teljes területet (példánkban bekezdés). Miért történik ez?
Háttérismétlés - ismételje meg a háttérképet
Igen, mert nem írtunk értéket a CSS-szabályhoz. háttérismétlés, ami azt jelenti, hogy az alapértelmezett értéket fogjuk használni. A specifikációt megnézve kiderül, hogy ez az érték megfelel az "ismétlésnek" (a kép megismétlése az összes tengely mentén). A válasz magától jött.
Ezért háttérismétléssel tudjuk kezelni a háttérkép ismétléseit... Ennek a szabálynak csak négy értéke lehet:
Háttér-helyzet - a háttér pozicionálása
Most felmerül a kérdés, el lehet-e mozdítani a háttérképet a terület bal felső sarkától, korlátozva az elem méretét. Természetesen lehet, és erre a célra külön szabály van háttér-helyzet:
A CSS specifikációját megnézve világossá válik, hogy az alapértelmezett háttérkép miért épül be pontosan a Html elem területének bal felső sarkába. Mivel a "0% 0%" érték az alapértelmezett a háttérpozíció-szabályhoz.
Nos, ha ez a szabály nincs kifejezetten beállítva egy elemhez (mint a mi esetünkben), akkor a böngésző kiválasztja azt az értéket, amelyet alapértelmezés szerint elfogad a specifikáció (vegye figyelembe, hogy a CSS koordinátatengelyei csak az a terület elem).
A specifikációból az is látható, hogy mind a relatív (százalék), mind az abszolút értékek (például) felhasználhatók a háttérkép pozícionálására a háttérpozíció segítségével. Nos, használhat olyan szavakat is, amelyek megfelelnek bizonyos numerikus értékeknek. De először az első dolgok.
A háttérkép pozicionálásának beállításakor abszolút egységek felhasználásával háttérpozícióban a végső helyzetének meghatározására a következő elv érvényesül:
Azok. a böngésző az X és Y tengely mentén kiszámítja a megadott eltolódásokat annak a területnek az origójától kezdve, amelyen az objektum van, egészen ennek a képnek az origójáig. Például ebben a bekezdésben a háttérképet a háttér pozíciója szempontjából pozícionáltam a következő CSS-szabályokkal:
Háttérkép: url (https: //site/image/logo.png); háttérismétlés: nem ismétlés; háttér-helyzet: 400px 25px;
Felhívjuk figyelmét, hogy ebben az esetben a nézetablak közepéhez, és nem az e bekezdésekhez rendelt terület közepéhez lesz igazítva. Nyilvánvaló, hogy a valóságban nem valószínű, hogy a háttérkép ilyen elrendezését alkalmazzák.
Ha azonban rögzített háttérpozíciót állít be olyan elemekhez, mint a Body vagy a HTML (azaz a teljes weboldalt lefedő címkékben), akkor ez a kép mindig látható lesz a nézetablakban, és pontosan ez az, amit a háttér-melléklet CSS tulajdonság tartalmaz leleteket a modern blokkelrendezésben.
Van még néhány előregyártási szabály Háttér, amely lehetővé teszi, hogy a fent leírt öt szabályt egy palackban egyesítse. Sőt, az előregyártott változat mind az öt értékei tetszőleges sorrendben és mennyiségben használhatók (egyediek, és a böngésző nem fogja összetéveszteni őket egymással). Bármit, amit nem határoz meg kifejezetten, a böngésző az alapértelmezett értékkel egyenlőnek fogja tekinteni.
Png) nem ismételhető 50%;
A példában bemutatott összeszerelési szabály az egyértelműség kedvéért alkalmazandó erre a bekezdésre. Kiderült, hogy nem szép, de nem ez a legfontosabb. Ehhez a bekezdéshez különös sárga háttér kitöltést használnak, valamint a LiveInternet logó képét a bekezdés közepéhez igazítva. Mivel a háttér-melléklet szabálynak nincs megadva érték, akkor az alapértelmezett görgetési értéket használja.
Ha valamilyen elemnél csak kitöltést szeretne beállítani színnel, és ne foglalkozzon a háttérképpel, akkor inkább:
Háttérszín: #FEFCDE
ír:
Háttér: #FEFCDE
A kombinált szabály összes többi értékét alapértelmezés szerint vesszük, és erre van szükség.
Sok szerencsét! Hamarosan találkozunk a blog webhelyein
Lehet, hogy érdekel
Lista stílus (típus, kép, pozíció) - Css szabályok a testreszabáshoz megjelenés listák html kódban A táblák, listák és egyebek sorainak váltakozó háttérszínének beállítása HTML elemek az oldalon az n-edik gyermek álosztály használatával 
Pozíció (abszolút, relatív és fix) - Html elemek elhelyezésének módjai a CSS-ben (bal, jobb, felső és alsó szabályok) 
Úszó és tiszta a CSS-ben - blokk elrendezési eszközök 
Helyezés Z-index és CSS Kurzor szabály segítségével az egér kurzorának megváltoztatásához 
Padding, Margin and Border - beillesztve CSS belsőés külső párnázás, valamint minden oldal keretei (felső, alsó, bal, jobb) 
Megjelenítés (blokk, nincs, inline) CSS-ben - állítsa be a Html elemek megjelenítésének típusát a weboldalon 
Css prioritások és növelés fontos, választókombinációval és csoportosítással, egyedi és szerzői stílusokkal 
CSS - mi ez, hogyan kapcsolódnak a lépcsőzetes stíluslapok HTML kód a Stílus és a Link használatával 
Címke-, osztály-, azonosító- és általános választók, valamint attribútum-választók a modern CSS-ben
Azt hiszem, nincs egyetlen olyan hely, 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 egy kép vagy szín szokásos célja, mint az oldal háttere. Valami ismerős lesz, de biztosan sokak számára újdonság lesz. 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 a több kép háttérként való hozzárendelése, de erről alább beszélünk, és először megvizsgáljuk a tulajdonság alapjait. háttér.
háttérszín
Biztos vagyok benne, hogy többször elvégezte a háttérszín-hozzárendeléseket. Ezt többféle jelöléssel lehet megtenni: reguláris (a szín nevét használjuk), hexadecimális vagy RGB jelölés. Minden típus egyenlő, használja azt, amelyik a legjobban tetszik. Igyekszem a legrövidebb lehetőséget használni, az érzékelés szempontjából ez egyszerűbb, és a stílusfájl kissé 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átszóságot, így hozzáadhatja a színünkhöz is, így:
P (háttérszín: rgba (255, 0, 0, 0,5);)
Az utolsó számjegy átlátszósága 50% volt. Az átlátszóság értékét 0-tól (teljesen átlátszó háttér) 1-ig (teljesen átlátszatlan) állíthatja be.
háttérkép
Ezt a tulajdonságot is nagyon gyakran használják, ez lehetővé teszi, hogy képet rendeljen a háttérhez. A CSS3 hozzáteszi azt a lehetőséget, hogy több képet rendeljen a háttérhez, mindegyik egyfajta réteget hoz létre, így mindegyik következő az előzőre kerül. Miért lehet ez hasznos? Minden meglehetősen egyszerű - tegyük fel, hogy meg kell csavarni a kis gombokat a webhely minden sarkában. Többé-kevésbé gördülékeny elrendezés, egy kép használata nem választható. Ezért 4 "réteget" készítünk, minden képet áthelyezünk a saját sarkába, és ennyi, a probléma megoldódott
Törzs (háttérkép: url ("image1"), url ("image2"), url ("image3"))
Ha egy képet kell a háttérhez rendelni, akkor csak az elsőt hagyjuk a kódban, szerintem ez érthető.
Két szabályt kell szem előtt tartani, amikor bármilyen képet háttérként használ:
- állítson kontrasztos háttérszínt arra az esetre, ha a felhasználó valamilyen okból nem tud képet megjeleníteni. Kikapcsolhatja a képek megjelenését, megtakarítja a forgalmat.
- 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 elég széles. Minden böngésző, még az IE8 is, támogatja ezt a tulajdonságot.
rövid információk
CSS verziók
Az értékek
URL A elérési út grafikus fájl, amely az url () konstrukcióban van megadva. Ebben az esetben a fájl elérési útja írható idézőjelbe (kettős vagy egyszemélyes), vagy ezek nélkül. none Törli az elem háttérképét. örökölni Örökli az értéket 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ója alkalmaz egy hátteret annak az elemnek a határán, amelyen hasLayout tulajdonság van beállítva. Ha egy elemnek nincs hasLayout-ja, a háttérkép tulajdonság tiszteletben tartja az elem határait a specifikációban megadottak szerint. A különbség a képernyőn észrevehető, ha a szegélyek szaggatottak vagy pontozottak, nem pedig szilárdak.
Ha az elem görgetésre vagy automatikusra van állítva, akkor az Internet Explorer 8-nak egy pixel függőleges késleltetése lesz, amikor a háttér görget.
Az Internet Explorer a 7.0 verzióig (beleértve a verziót) nem támogatja az öröklési értéket.
Ha a háttér egy táblázat sorához van beállítva (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Ennek a példának az eredménye Chrome böngészőábrán látható. 1. Az Internet Explorer, az Opera és a Firefox böngésző helyesen jeleníti meg a vonal hátterét (2. ábra).
Ábra. 1. Ismételje meg az egyes cellák hátterét
Ábra. 2. A teljes vonal háttere
