Több háttér. Hogyan készítsünk több CSS háttérképet. Progresszív fejlesztések és régi böngészők

A CSS 2.1 pszeudoelemek használata lehetővé teszi, hogy egyetlen HTML-elemen 3 szintű háttér, 2 rögzített méretű kép és több összetett körvonal legyen. Ez a módszer jelentősen kibővíti a weboldalak tervezési lehetőségeit minden olyan böngésző számára, amely támogatja a CSS 2.1 pszeudoelemeket pozicionálással. Nincs szükség CSS3 támogatásra.

Lényegében a CSS pszeudoelemek létrehozása és kezelése (:előtte és :utána) hasonló ahhoz, ahogyan a célelemen belüli beágyazott HTML-elemekkel dolgozik. De van egy jelentős előnye - minden a szemantikán kívül történik, beágyazott HTML-elemek használata nélkül.

Több háttér és/vagy körvonal létrehozásához a pszeudoelemeket a tartalom mögé csúsztatja, és abszolút pozicionálással rögzíti a HTML-elem kívánt pontjához.

A pszeudo elem nem tartalmaz valós tartalmat, és abszolút pozicionálva van. Így a „szülő” elem bármely területére kinyújtható anélkül, hogy a tartalom befolyásolná. Ehhez használhatja a felső , jobb , alsó , bal , szélesség és magasság tulajdonságok kombinációját.

Milyen hatásokat érhet el?

Egyetlen elem használatával kaphat parallaxist, több hátteret (színeket és képeket egyaránt), levágott háttérképeket, képcserét, kibővíthető elemeket vonásként képekkel, rugalmas mesterséges oszlopokat, az elem határain túlnyúló képeket, több vonást és más népszerű olyan effektusok, amelyek jellemzően képcímkéket és/vagy további HTML-jelöléseket használnak.

A bemutató oldalakon számos népszerű weboldal tervezési effektus megvalósítását láthatja ezzel a technikával.

Ezenkívül a :hover stílusmódosításaival összetettebb hatásokat érhet el.

Mintakód: Több háttérkép

Ezzel a technikával reprodukálhatja a parallaxis effektust több háttérképpel (ahogyan a Silverback webhelyen használják), egyetlen HTML-elem használatával.

Az elem saját hátteret és szükséges kitöltést kap. Egy elem relatív helyzete referenciapontként szolgál a pszeudoelemek abszolút pozicionálásához. A pozitív z-index érték lehetővé teszi a pszeudoelemek helyzetének beállítását a z tengely mentén.

#silverback ( pozíció: relatív; z-index: 1; min-szélesség: 200 képpont; min-magasság: 200 képpont; kitöltés: 120 képpont 200 képpont 50 képpont; háttér: #d3ff99 url(vines-back.png) -10% 0 ismétlés-x ;)

Mindkét pszeudoelem abszolút pozícióban van, és az elem oldalain helyezkedik el. A -1 z-index értéke a pszeudoelemet a réteg mögé helyezi tartalom. Így a pszeudoelemek az elem hátterének és körvonalának tetejére kerülnek, de minden tartalom kiválasztható és kattintható marad.

#ezüsthát:előtte, #ezüsthát:után (pozíció:abszolút; z-index:-1; felül:0; bal:0;jobb:0;alul:0;padding-top:100px; )

Minden pszeudoelemnek van egy ismétlődő háttérképkészlete. A parallaxis hatás reprodukálásához nincs szükség másra.

A tartalom tulajdonság lehetővé teszi egy kép hozzáadását generált tartalomként. Két pszeudoelem birtokában 2 további kép hozzáadható az elemhez. Más tulajdonságokkal, például szövegigazítással és kitöltéssel nagyjából elhelyezhetők pszeudoelemekben.

#silverback:before ( tartalom:url(gorilla-1.png); padding-left:3%; text-align:left; background:transparent url(vines-mid.png) 300% 0 ismétlés-x; ) #silverback :after ( tartalom:url(gorilla-2.png); padding-right:3%; text-align:right; background:transparent url(vines-front.png) 70% 0 ismétlés-x; )

Példakód: rugalmas mesterséges oszlopok

A leírt technika másik alkalmazása az azonos magasságú, rugalmas oszlopok létrehozása képek vagy további kapcsolódó elemek használata nélkül.

A HTML jelölés nagyon egyszerű. Osztályok használata minden div elemhez a CSS 2.1 szelektorok helyett, amelyeket az IE6 nem támogat. Ha nincs szükség az IE6 támogatására, akkor szelektorok használhatók.

A tárolónak százalékos szélessége, relatív pozicionálása és pozitív z-index tulajdonságértéke van. Az overflow:hidden használata lehetővé teszi az elem számára, hogy becsomagolja lebegő gyermekei tartalmát, és elrejtse a túlcsorduló pszeudoelemeket. A háttérszín adja az egyik oszlop színét.

#faux ( pozíció: relatív; z-index: 1; szélesség: 80%; margó: 0 automatikus; túlcsordulás: rejtett; háttér: #ffaf00; )

A div leszármazott elemeinek relatív pozicionálása lehetővé teszi az oszlopok sorrendjének szabályozását, függetlenül attól, hogy az eredeti elrendezésben hogyan jelennek meg.

#faux div ( pozíció:relatív; float:bal; szélesség:30%; ) #faux .main (bal:35%) #faux .supp1 (bal:-28,5%) #faux .supp2 (bal:8,5%)

A másik két oszlop hátterű pszeudoelemek felhasználásával jön létre. Szükség esetén képeket használhat háttérként.

#faux:előtte, #faux:utána (tartalom:""; pozíció:abszolút; z-index:-1; felül:0; jobbra:0; lent:0; balra:33,333%; háttér:#f9b6ff; ) # faux:after ( balra:66,667%; háttér:#79daff; )

Mintakód: Több ütés

Több ütést szinte ugyanúgy szerveznek. Használata lehetővé teszi a képek elhagyását a hatás megőrzése mellett.

Az elemnek olyan relatív pozicionálással és kitöltési szélességgel kell rendelkeznie, hogy tartalmazza az álelemek által létrehozott extra körvonalat.

#szegélyek (pozíció:relatív; z-index:1; kitöltés:30px; szegély:5px tömör #f00; háttér:#ff9600; )

A pszeudoelemet az elem határától megfelelő távolságra helyezzük el, a tartalmi réteg alá helyezzük negatív z-index segítségével, és megadjuk a szükséges körvonalat és hátteret.

#szegélyek:előtte (tartalom:""; pozíció:abszolút; z-index:-1; felül:5px; bal:5px;jobb:5px; lent:5px; keret:5px szilárd #ffea00; háttér:#4aa929; ) #szegélyek:utána (tartalom:""; pozíció:abszolút; z-index:-1; felül: 15px; bal:15px; jobb:15px; alul:15px; szegély:5px tömör #00b4ff; háttér:#fff; )

Progresszív fejlesztések és régi böngészők

Az IE6 és IE7 nem támogatja a CSS 2.1 pszeudoelemeit, és figyelmen kívül hagyja az összes:before és:after deklarációt. Nem hozzák meg az összes fejlesztést, de megtartják az alapvető funkciókat.

Figyelem a Firefox 3.0 használatakor

A Firefox 3.0 támogatja a CSS 2.1 pszeudoelemeit, de nem támogatja azok elhelyezését. Ennek a részleges támogatásnak köszönhetően az effektusok, amelyek kifejezetten a pszeudoelemek szélességi vagy magassági tulajdonságaitól függenek, szörnyen nézhetnek ki. A Firefox 3.0 számára nincs más megoldás, ha a szélesség vagy magasság tulajdonságokat használta. Néha bizonyos fejlesztések érhetők el a display:block hozzáadásával a pszeudoelem stílusaihoz.

Mielőtt olyan technikákat használna, amelyek megkövetelik a pszeudoelemek elhelyezését a szélesség vagy magasság tulajdonságok használatával, mérlegelnie kell, mennyire fontos a Firefox 3.0 támogatása, és a böngészőt használó felhasználók hány százaléka.

Ez a probléma teljesen megoldódott azokban az alkalmazásokban, amelyek abszolút pozicionálást használnak a szélesség vagy magasság tulajdonságok helyett.

Fejlesztések a CSS3-mal

A cikkben szereplő összes példa javítható a CSS3 használatával.

A border-radius , rgba , transzformációs tulajdonságok és több CSS3-háttér pszeudoelemekkel kombinálva lehetővé teszi bonyolultabb hatások megvalósítását. Jelenleg azonban nincs olyan böngésző, amely támogatja a CSS3 animációkat vagy álelemek átalakításait.

A jövő: CSS3 pszeudoelemek

A CSS3 pszeudoelemeinek javasolt fejlesztései (lásd a CSS3 Generált és Cserélt tartalommodul dokumentumot) tartalmazzák a kötött pszeudoelemeket (::before::before), több pszeudoelemet (::after(2)), burkoló pszeudoelemeket ( : :outside) és pszeudoelemek beszúrásának lehetősége a dokumentum betöltött részeihez (::alternate).

Az ilyen változtatások gyakorlatilag korlátlan lehetőségeket nyitnak meg mindenféle effektus létrehozására egyetlen elem és egy sor pszeudoelem felhasználásával.

). Ma egy másik érdekes funkcióról fogunk beszélni – több kép használatáról a háttérben.

Háttér összetétele

Számos oka lehet annak, hogy miért szeretne több képet komponálni a háttérben, ezek közül a legfontosabbak:

• a forgalom megtakarítása a képek méretétől, ha az egyes képek össztömege kisebb, mint egy lapított rétegű kép, és
• az egyes rétegek független viselkedésének szükségessége, például parallaxis hatások megvalósítása során.

Lehet más ésszerű oka is :)

Klasszikus megközelítés

Tehát több háttérképet kell egymásra helyeznünk. Általában hogyan oldják meg ezt a problémát? Nagyon egyszerű: minden háttérképhez létrejön egy blokk, amelyhez hozzárendeljük a megfelelő háttérképet. A blokkok vagy egymásba vannak ágyazva, vagy a megfelelő pozicionálási szabályokkal egy sorban helyezkednek el. Íme egy egyszerű példa:

A "halász" osztályú blokk a "sellő" belsejében csak bemutató célokat szolgál.

Most néhány stílus:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( magasság:300px; szélesség:480px; pozíció: relatív; ) .sample1 .sea ( háttér: url(media/sea.png) ismétlés-x bal felső sarokban; ) .sample1 .mermaid ( háttér: url(media/mermaid.svg) repeat-x bal lent : 30px; felső: 90px; pozíció: abszolút

Eredmény:

Ebben a példában három egymásba ágyazott háttér és egy blokk található halakkal a „háttér” blokkok mellett. Elméletileg a halak mozgathatók például JavaScript vagy CSS3 Transitions/Animations segítségével.

A „.fishing” példája egyébként a háttérben történő pozicionálás új szintaxisát használja, amely szintén a CSS3-ban van definiálva:
háttér: url(media/fishing.svg) no-repeat, jobb felső 10px;
Jelenleg az IE9+ és az Opera 11+ támogatja, de a Firefox 10 és a Chrome 16 nem támogatja. Így az utolsó két böngésző felhasználói még nem fogják tudni fogni a halat.

Több háttérrel

A CSS3-hoz hozzáadott új lehetőség segít – több háttérkép definiálása egy elemhez. Ez így néz ki:

És a megfelelő stílusok:
.sample2 .sea ( magasság: 300 képpont; szélesség: 480 képpont; pozíció: relatív; háttérkép: url("media/fishing.svg"), url("media/mermaid.svg"), url("média/tenger. png"); háttérpozíció: jobb felső 10 képpont, bal alsó, bal felső; háttér ismétlés: ismétlés nélkül, ismétlés-x, ismétlés-x ; ) .sample2 .fish ( háttér: url("media/fish.svg ") nem ismétlődik; magasság: 70 képpont; szélesség: 100 képpont; bal: 30 képpont; felül: 90 képpont; pozíció: abszolút; )
Több kép meghatározásához a háttérkép szabályt kell használnia, amely az egyes képeket vesszővel elválasztva sorolja fel. További szabályok, valamint egy lista is beállíthat pozícionálást, ismétléseket és egyéb paramétereket minden egyes képhez. Jegyezze meg a képek felsorolásának sorrendjét: a rétegek balról jobbra vannak felsorolva a legfelsőtől a legalsóig.

Az eredmény pontosan ugyanaz:

Egy szabály

Ha a halakat nem kell külön blokkra osztani a későbbi manipulációkhoz, a teljes képet egy egyszerű szabállyal át lehet írni:

Stílusok:
.sample3 .sea ( magasság: 300 képpont; szélesség: 480 képpont; pozíció: relatív; háttérkép: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); háttérpozíció: jobb felső 10px, bal alsó, 30px 90px, bal felső; háttér-ismétlés: nincs ismétlés, ismétlés-x ; )

Nem mutatok képet az eredményről - hidd el, ez egybeesik a fenti két képpel. De ismét figyeljen a stílusokra, különösen a „background-repeat”-re - a specifikáció szerint, ha a lista végén hiányzik egy része, akkor a böngészőnek meg kell ismételnie a megadott listát a szükséges számú alkalommal, hogy megfeleljen a képek számának a listában.

Ebben az esetben ez egyenértékű ezzel a leírással:
háttér-ismétlés: no-repeat, repeat-x, nem ismétlés, ismétlés-x;

Még rövidebb is

Ha emlékszik a CSS 2.1-re, az meghatározta a háttérképek rövid formában történő leírásának képességét. Mit szólnál több képhez? Ez is lehetséges:

Sample4 .sea ( magasság: 300 képpont; szélesség: 480 képpont; pozíció: relatív; háttér: url ("media/fishing.svg") jobb felső 10 képpont no-repeat, url ("media/mermaid.svg") bal alsó ismétlés-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x )

De vegye figyelembe, hogy most már nem hagyhatja ki az értékeket (hacsak nem egyezik az alapértelmezett értékkel). Egyébként, ha a háttérkép színét szeretné beállítani, ezt a legutolsó rétegben kell megtennie.

Dinamikus képek

Ha a kompozíció legfeljebb statikus vagy dinamikus a tároló méretétől függően, akkor a több háttér nyilvánvalóan leegyszerűsíti az oldal kialakítását. De mi van akkor, ha a kompozíció egyes elemeivel a javascripttől függetlenül kell dolgoznia (mozgatás, görgetés stb.)?

Egyébként itt van egy példa az életből - egy pitypang téma a Yandexben:


Ha belenézel a kódba, valami ilyesmit fogsz látni:

...

A „b-fluff-bg”, „b-fluff__cloud” és „b-fluff__item” osztályú blokkok egymást átfedő háttérképeket tartalmaznak. Ráadásul a felhős háttér folyamatosan gördül, és pitypang repül át a képernyőn.

Ezt át lehet írni több háttérrel? Elvileg igen, de feltéve, hogy 1) támogatja ezt a funkciót a célböngészőkben, és... 2) olvass tovább;)

Hogyan adjunk dinamikát több háttérhez? Ilyen helyzetben kényelmesnek bizonyul, hogy a belső megjelenítésben a böngésző a megfelelő szabályok szerint osztja el a háttérképek egyes paramétereit. Pl. pozicionálásnál van „háttérpozíció”, műszakoknál pedig elég csak ezt módosítani. A több kép használatának azonban költsége van – ez a szabály (és minden hasonló) megköveteli, hogy a blokkhoz definiált összes háttér pozícióját listázza, és ezt nem teheti meg szelektíven.

Ha animációt szeretne hozzáadni a halak hátteréhez, használja a következő kódot:
$(dokumentum).ready(function() ( var tenger = $(".minta5 .tenger"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var sellőX = 0; var t = 0 függvény animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sellőX = 0; halY = -10 + (10 * Math.cos(t * 0,091)); halX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "felső " + halY + "px jobbra" + halX + "px, " + sellőX + "px alsó", + halakX + "px" + fishesY + "px, bal felső"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Ahol
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) 1 (0. )); ))();

És mellesleg az animációkat a CSS3 Transitions/Animations segítségével is lehet készíteni, de ez egy külön beszélgetés témája.

Parallaxis és interaktivitás

Végül, a hasonló manőverek könnyen hozzáadhatnak parallaxis hatásokat vagy interaktív interakciót a háttérrel:

Ilyen esetekben hasznos lehet több háttérkép is, hiszen bár csak a háttérről (és nem a tartalomról) beszélünk, használatuk lehetővé teszi, hogy elkerüljük a html kód és a DOM szennyeződését. De mindennek ára van: nem férek hozzá az egyes kompozíciós elemekhez név, azonosító, osztály vagy egyéb paraméter alapján. Kifejezetten emlékeznem kell az elemek sorrendjére a kód összetételében, és bármely elem bármely paraméterének minden változásához össze kell ragasztanom egy sort, amely leírja ennek a paraméternek az értékeit minden elemre, és frissítenem kell. a teljes kompozíciót.

Sea.style.backgroundPosition = "felső " + halY + "px jobbra" + halX + "px, " + sellőX + "px alsó", + halakX + "px" + fishesY + "px, bal felső";

Biztos vagyok benne, hogy ez kényelmes javascript kódba csomagolható, amely gondoskodik az egyes rétegekkel való kapcsolatok virtualizálásáról, miközben az oldal html kódját a lehető legtisztábban hagyja.

Mi a helyzet a kompatibilitással?

A népszerű böngészők minden modern verziója, beleértve az IE9+-t is, több képet is támogat (ellenőrizheti például a Caniuse-t).

A Modernizr segítségével alternatív megoldásokat is kínálhat olyan böngészők számára, amelyek nem támogatják a több hátteret. Ahogy Chris Coyier írta bejegyzésében a rétegrendről több háttér használata esetén, tegyen valamit a következőképpen:

Multiplebgs body ( /* Félelmetes többszörös BG-deklarációk, amelyek túlmutatnak a valóságon, és csajok nélkülözik */ ) .no-multiplebgs body ( /* laaaaaame backback */ )
Ha aggódik amiatt, hogy a JS-t visszafelé kompatibilitás biztosítására használja, egyszerűen kétszer deklarálhatja a hátteret, bár ennek is megvannak a maga hátrányai az erőforrások lehetséges kétszeres betöltése formájában (ez attól függ, hogy egy adott böngészőben hogyan valósult meg a css feldolgozás):

/* több bg tartalék */ háttér: #000 url(...) ...; /* Félelmetes többszörös BG-deklarációk, amelyek túlmutatnak a valóságon, és a csajok forrását vonják maguk után */ background url(...), url(...), url(...), #000 url(...);

Ha már elkezdett gondolkodni a Windows 8-on, ne feledje, hogy a metro stílusú alkalmazások fejlesztése során többféle hátteret is használhat, mivel ugyanazt a motort használja, mint az IE10.

P.s. A témáról: Nem tudok nem emlékezni arra a fenomenális cikkre, amelyről szól

). Ma egy másik érdekes funkcióról fogunk beszélni – több kép használatáról a háttérben.

Háttér összetétele

Számos oka lehet annak, hogy miért szeretne több képet komponálni a háttérben, ezek közül a legfontosabbak:

• a forgalom megtakarítása a képek méretétől, ha az egyes képek össztömege kisebb, mint egy lapított rétegű kép, és
• az egyes rétegek független viselkedésének szükségessége, például parallaxis hatások megvalósítása során.

Lehet más ésszerű oka is :)

Klasszikus megközelítés

Tehát több háttérképet kell egymásra helyeznünk. Általában hogyan oldják meg ezt a problémát? Nagyon egyszerű: minden háttérképhez létrejön egy blokk, amelyhez hozzárendeljük a megfelelő háttérképet. A blokkok vagy egymásba vannak ágyazva, vagy a megfelelő pozicionálási szabályokkal egy sorban helyezkednek el. Íme egy egyszerű példa:

A "halász" osztályú blokk a "sellő" belsejében csak bemutató célokat szolgál.

Most néhány stílus:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( magasság:300px; szélesség:480px; pozíció: relatív; ) .sample1 .sea ( háttér: url(media/sea.png) ismétlés-x bal felső sarokban; ) .sample1 .mermaid ( háttér: url(media/mermaid.svg) repeat-x bal lent : 30px; felső: 90px; pozíció: abszolút

Eredmény:

Ebben a példában három egymásba ágyazott háttér és egy blokk található halakkal a „háttér” blokkok mellett. Elméletileg a halak mozgathatók például JavaScript vagy CSS3 Transitions/Animations segítségével.

A „.fishing” példája egyébként a háttérben történő pozicionálás új szintaxisát használja, amely szintén a CSS3-ban van definiálva:
háttér: url(media/fishing.svg) no-repeat, jobb felső 10px;
Jelenleg az IE9+ és az Opera 11+ támogatja, de a Firefox 10 és a Chrome 16 nem támogatja. Így az utolsó két böngésző felhasználói még nem fogják tudni fogni a halat.

Több háttérrel

A CSS3-hoz hozzáadott új lehetőség segít – több háttérkép definiálása egy elemhez. Ez így néz ki:

És a megfelelő stílusok:
.sample2 .sea ( magasság: 300 képpont; szélesség: 480 képpont; pozíció: relatív; háttérkép: url("media/fishing.svg"), url("media/mermaid.svg"), url("média/tenger. png"); háttérpozíció: jobb felső 10 képpont, bal alsó, bal felső; háttér ismétlés: ismétlés nélkül, ismétlés-x, ismétlés-x ; ) .sample2 .fish ( háttér: url("media/fish.svg ") nem ismétlődik; magasság: 70 képpont; szélesség: 100 képpont; bal: 30 képpont; felül: 90 képpont; pozíció: abszolút; )
Több kép meghatározásához a háttérkép szabályt kell használnia, amely az egyes képeket vesszővel elválasztva sorolja fel. További szabályok, valamint egy lista is beállíthat pozícionálást, ismétléseket és egyéb paramétereket minden egyes képhez. Jegyezze meg a képek felsorolásának sorrendjét: a rétegek balról jobbra vannak felsorolva a legfelsőtől a legalsóig.

Az eredmény pontosan ugyanaz:

Egy szabály

Ha a halakat nem kell külön blokkra osztani a későbbi manipulációkhoz, a teljes képet egy egyszerű szabállyal át lehet írni:

Stílusok:
.sample3 .sea ( magasság: 300 képpont; szélesség: 480 képpont; pozíció: relatív; háttérkép: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); háttérpozíció: jobb felső 10px, bal alsó, 30px 90px, bal felső; háttér-ismétlés: nincs ismétlés, ismétlés-x ; )

Nem mutatok képet az eredményről - hidd el, ez egybeesik a fenti két képpel. De ismét figyeljen a stílusokra, különösen a „background-repeat”-re - a specifikáció szerint, ha a lista végén hiányzik egy része, akkor a böngészőnek meg kell ismételnie a megadott listát a szükséges számú alkalommal, hogy megfeleljen a képek számának a listában.

Ebben az esetben ez egyenértékű ezzel a leírással:
háttér-ismétlés: no-repeat, repeat-x, nem ismétlés, ismétlés-x;

Még rövidebb is

Ha emlékszik a CSS 2.1-re, az meghatározta a háttérképek rövid formában történő leírásának képességét. Mit szólnál több képhez? Ez is lehetséges:

Sample4 .sea ( magasság: 300 képpont; szélesség: 480 képpont; pozíció: relatív; háttér: url ("media/fishing.svg") jobb felső 10 képpont no-repeat, url ("media/mermaid.svg") bal alsó ismétlés-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x )

De vegye figyelembe, hogy most már nem hagyhatja ki az értékeket (hacsak nem egyezik az alapértelmezett értékkel). Egyébként, ha a háttérkép színét szeretné beállítani, ezt a legutolsó rétegben kell megtennie.

Dinamikus képek

Ha a kompozíció legfeljebb statikus vagy dinamikus a tároló méretétől függően, akkor a több háttér nyilvánvalóan leegyszerűsíti az oldal kialakítását. De mi van akkor, ha a kompozíció egyes elemeivel a javascripttől függetlenül kell dolgoznia (mozgatás, görgetés stb.)?

Egyébként itt van egy példa az életből - egy pitypang téma a Yandexben:


Ha belenézel a kódba, valami ilyesmit fogsz látni:

...

A „b-fluff-bg”, „b-fluff__cloud” és „b-fluff__item” osztályú blokkok egymást átfedő háttérképeket tartalmaznak. Ráadásul a felhős háttér folyamatosan gördül, és pitypang repül át a képernyőn.

Ezt át lehet írni több háttérrel? Elvileg igen, de feltéve, hogy 1) támogatja ezt a funkciót a célböngészőkben, és... 2) olvass tovább;)

Hogyan adjunk dinamikát több háttérhez? Ilyen helyzetben kényelmesnek bizonyul, hogy a belső megjelenítésben a böngésző a megfelelő szabályok szerint osztja el a háttérképek egyes paramétereit. Pl. pozicionálásnál van „háttérpozíció”, műszakoknál pedig elég csak ezt módosítani. A több kép használatának azonban költsége van – ez a szabály (és minden hasonló) megköveteli, hogy a blokkhoz definiált összes háttér pozícióját listázza, és ezt nem teheti meg szelektíven.

Ha animációt szeretne hozzáadni a halak hátteréhez, használja a következő kódot:
$(dokumentum).ready(function() ( var tenger = $(".minta5 .tenger"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var sellőX = 0; var t = 0 függvény animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sellőX = 0; halY = -10 + (10 * Math.cos(t * 0,091)); halX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "felső " + halY + "px jobbra" + halX + "px, " + sellőX + "px alsó", + halakX + "px" + fishesY + "px, bal felső"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Ahol
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) 1 (0. )); ))();

És mellesleg az animációkat a CSS3 Transitions/Animations segítségével is lehet készíteni, de ez egy külön beszélgetés témája.

Parallaxis és interaktivitás

Végül, a hasonló manőverek könnyen hozzáadhatnak parallaxis hatásokat vagy interaktív interakciót a háttérrel:

Ilyen esetekben hasznos lehet több háttérkép is, hiszen bár csak a háttérről (és nem a tartalomról) beszélünk, használatuk lehetővé teszi, hogy elkerüljük a html kód és a DOM szennyeződését. De mindennek ára van: nem férek hozzá az egyes kompozíciós elemekhez név, azonosító, osztály vagy egyéb paraméter alapján. Kifejezetten emlékeznem kell az elemek sorrendjére a kód összetételében, és bármely elem bármely paraméterének minden változásához össze kell ragasztanom egy sort, amely leírja ennek a paraméternek az értékeit minden elemre, és frissítenem kell. a teljes kompozíciót.

Sea.style.backgroundPosition = "felső " + halY + "px jobbra" + halX + "px, " + sellőX + "px alsó", + halakX + "px" + fishesY + "px, bal felső";

Biztos vagyok benne, hogy ez kényelmes javascript kódba csomagolható, amely gondoskodik az egyes rétegekkel való kapcsolatok virtualizálásáról, miközben az oldal html kódját a lehető legtisztábban hagyja.

Mi a helyzet a kompatibilitással?

A népszerű böngészők minden modern verziója, beleértve az IE9+-t is, több képet is támogat (ellenőrizheti például a Caniuse-t).

A Modernizr segítségével alternatív megoldásokat is kínálhat olyan böngészők számára, amelyek nem támogatják a több hátteret. Ahogy Chris Coyier írta bejegyzésében a rétegrendről több háttér használata esetén, tegyen valamit a következőképpen:

Multiplebgs body ( /* Félelmetes többszörös BG-deklarációk, amelyek túlmutatnak a valóságon, és csajok nélkülözik */ ) .no-multiplebgs body ( /* laaaaaame backback */ )
Ha aggódik amiatt, hogy a JS-t visszafelé kompatibilitás biztosítására használja, egyszerűen kétszer deklarálhatja a hátteret, bár ennek is megvannak a maga hátrányai az erőforrások lehetséges kétszeres betöltése formájában (ez attól függ, hogy egy adott böngészőben hogyan valósult meg a css feldolgozás):

/* több bg tartalék */ háttér: #000 url(...) ...; /* Félelmetes többszörös BG-deklarációk, amelyek túlmutatnak a valóságon, és a csajok forrását vonják maguk után */ background url(...), url(...), url(...), #000 url(...);

Ha már elkezdett gondolkodni a Windows 8-on, ne feledje, hogy a metro stílusú alkalmazások fejlesztése során többféle hátteret is használhat, mivel ugyanazt a motort használja, mint az IE10.

P.s. A témában: Nem tudok nem emlékezni a fenomenális cikkre, amelyről szól.

A CSS 2-ben lehetetlen egyszerre két hátteret hozzáadni egy elemhez, ezért az egyik elemet a másikba kell beágyazni, és mindegyikhez saját háttérképet kell adni. Bonyolult elrendezések esetén az ilyen mellékleteket néha körülbelül egy tucatnyira lehet számolni. Nyilvánvaló, hogy egy ilyen felhalmozódás nem vezet semmi jóra, de mit tegyünk? Kiderült, hogy van valami! A CSS 3-ban egyszerre több háttérképet is hozzáadhat bármely elemhez. Fogjuk tehát a blokkrajzot (1. ábra), darabokra vágjuk, és elkezdjük tesztelni a böngészőkben.

Rizs. 1. A webhely letiltása

Az egyszerűség kedvéért a blokk szélességét fix méretnek veszem, a magasság pedig tartalomtól függően változik. A rajzon jól láthatóak a felső és az alsó részek, ezeket a szerkesztőben kivágom, és külön fájlban rétegekre hajtom. A középső részt úgy kell megválasztani, hogy az függőlegesen, varratok nélkül ismétlődjön. A kialakításnak jól meghatározott ismétlődő mintája van, így nem jelenthet nehézséget a kiemelése. Másolom és beillesztem az előző töredékekre. Az eredmény egy ehhez hasonló kép lesz (2. ábra).

Rizs. 2. Elkészített képek

Elvileg minden töredéket külön fájlként menthet, de a CSS sprite-oknak (az úgynevezett több kép egybe ragasztásának technológiája) számos előnnyel jár. Egyrészt a fájlok számának csökkenése miatt csökken a szerverhez intézett kérések száma, másrészt a képek összességében gyorsabban töltődnek be és jelennek meg.

Magát a hátteret a háttér tulajdonság jeleníti meg, amely a kívánt töredék koordinátáit is megadja. Az egyes hátterek paraméterei vesszővel elválasztva vannak felsorolva, és ebben az esetben a sorrend számít. Azt akarom, hogy a blokk teteje és alja ne legyen átfedésben, ezért ezeket helyezem előtérbe (1. példa).

1. példa: Több háttérkép

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Az első háttér a blokk felső szegélyét, a második háttér az alsó, a harmadik pedig a függőleges szegélyeket jeleníti meg.

Benézünk a böngészőkbe. Az Internet Explorer 8 egyáltalán nem jelenített meg képeket, más böngészők (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) helyesen jelenítették meg a keretet (3. ábra).

Rizs. 3. Keret nézet a Safari böngészőben

Több háttér használata nagyban megkönnyíti a helyzetet a fejlesztők számára, különösen a blokkok elrendezésénél. Már csak egy apróság maradt. Szükséges, hogy az IE 6–8 böngésző megszűnjön.

Ma már szinte minden weboldal dizájn tartalmaz gyönyörű háttérképet.

Minden tervező tudja, hogy a tervezés legegyszerűbb módja a lehető legjobb. Az egyik egyszerű és kényelmes technika néhány soros CSS-kód használata.

Apróságnak tűnik, de néha mégis egyszerű módon kell valami összetettet létrehozni. Például több hátteret valósítson meg egyedi paraméterekkel, kiegészítő div blokkok használata nélkül. Vagyis spórolni.

Ebben a cikkben azt a kódszintaxist tekintjük meg, amely több hátteret támogat egyetlen elemben. Így néz ki a való életben:

CSS-kód több háttérhez

Több háttérképet több css háttérparaméter értékkel valósít meg, amelyeket kóma választ el egymástól:

#multipleBGs ( háttér: url(photo1.png), url(photo2.png), url(photo3.png) ; háttér-ismétlés: nincs ismétlés, nincs ismétlés, ismétlés-y; háttérpozíció: 0 0, 30 képpont 70px, jobb felső szélesség: 400px szegély: 1px tömör #ccc;

Ugyanezt próbáltam megtenni egy rövid kóddal. Sajnos nem működik.

Ezenkívül használhat más háttértulajdonságokat (háttérmelléklet, háttér-klip, háttérkép, háttér-eredet, háttérpozíció, háttérismétlés, háttérméret). Ugyanaz, mint a CSS gradienseknél.

Ez minden! Remélem tetszett ez a több háttér létrehozásának technikája, segédelemek használata nélkül. Tiszta szemantikai kód.

Ha bármilyen kérdése, megjegyzése vagy javaslata van ezzel a technikával kapcsolatban több háttér létrehozására, írja meg a megjegyzésekben. Emellett szeretnék tesztelni