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 több használata vonalak css kód.
Apróságnak tűnik, de mégis, néha valami bonyolultat kell tennie egyszerű módon. 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.
Ennyi! 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
Feladat
Böngészőkön keresztül adjon hozzá két háttérképet a blokkhoz.
Megoldás
A háttérképeket meglehetősen aktívan használják blokkok létrehozására, mivel segítségükkel a legfurcsább tervek jönnek létre. Különösen dekoratív sarkokat, függőleges és vízszintes vonalakat és még sok mást adhat hozzá az elemhez.
Keresztböngésző esetén (vagyis minden böngészőnél, beleértve a régebbi verziókat is) nem lehet két hátteret hozzáadni egy elemhez, ezért egy trükköt kell használni, és az egyik elemet a másikba kell beágyazni. Ebben az esetben minden beágyazott elemhez saját háttérkép jön létre, a blokkok átfedése miatt, és az a hatás jön létre, hogy csak egy elem van, és több háttérképet tartalmaz. Itt az a fontos, hogy ne adjunk hozzá párnázást külső elemek, különben a hatás elvész.
Például fontolja meg függőleges dekoratív vonalak létrehozását a blokk bal és jobb oldalán. Ehhez először készítsen képeket, amelyeket függőlegesen, illesztések nélkül kell megismételni. ábrán. Az 1. ábra az első elemhez használt háttérképet mutatja a bal oldalon, és az 1. ábrán. 2 háttere egy beágyazott elemhez, amely szegélyt ad a jobb oldalra.
Rizs. 1. Háttérkép a bal oldali szegélyhez
Rizs. 2. Háttérkép a jobb oldali szegélyhez
Az a blokkelem, amelyhez a háttér hozzáadódik, általában a címkét használja
1. példa: Két háttérkép
HTML5 CSS 2.1 IE Cr Op Sa Fx
Kapott a rádióállomás Cape Chelyuskin 7450 csoportok.
Ennek a példának az eredménye az ábrán látható. 3.
Rizs. 3. Egy blokk nézete két háttérképpel
belül található ). Ma egy másikról beszélünk egy kicsitérdekes lehetőség
- több kép használata a háttérben.
Háttér összetétele
- Számos oka lehet annak, hogy miért szeretne több képet készíteni 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
Lehet más ésszerű oka is :)
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 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.
Egyébként a „.fishing” példája 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. Í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, szintén listaként, minden képhez beállíthatunk pozicionálást, ismétléseket és egyéb paramétereket. 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 át lehet írni egy egyszerű szabály: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 megfelelő szám alkalommal, hogy megfeleljen a listán szereplő képek számának.
Ebben az esetben ez egyenértékű 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. Ezenkívül 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 megváltoztatni. 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
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 zavarban van a JS használatával kapcsolatban visszafelé kompatibilitás, egyszerűen kétszer deklarálhatod a hátteret, azonban ennek is megvannak a hátrányai a lehetséges formájában kettős rendszerindítás erőforrások (ez a css feldolgozás megvalósításától függ egy adott böngészőben):
/* 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
Feladat
Adjon hozzá két háttérképet egy blokkhoz a CSS3 használatával.
Megoldás
A modern böngészők lehetővé teszik, hogy tetszőleges számú háttérképet adjunk egy elemhez, az egyes hátterek paramétereit vesszővel elválasztva felsorolva. Elég, ha az univerzális háttér tulajdonságot használjuk, és először egy hátteret adunk meg, majd a másodikat vesszővel elválasztva.
Például fontolja meg függőleges dekoratív vonalak létrehozását a blokk bal és jobb oldalán. Ehhez először készítsen képeket, amelyeket függőlegesen, illesztések nélkül kell megismételni. ábrán. Az 1. ábra a háttérképet mutatja, amely a bal szélen jelenik meg, és az 1. 2 kép a jobb szélen való megjelenítéshez.
Rizs. 1. Háttérkép a bal oldali szegélyhez
Rizs. 2. Háttérkép a jobb oldali szegélyhez
Az a blokkelem, amelyhez a háttér hozzáadódik, általában a címkét használja
1. példa: Két háttérkép
HTML5 CSS3 IE Cr Op Sa Fx
Kapott a rádióállomás Cape Chelyuskin 7450 csoportok.
Egy elemhez egyszerre több háttérképet is hozzáadhat egyetlen háttértulajdonságon keresztül. Ez lehetővé teszi, hogy egy elem segítségével összetett hátteret vagy egy képet hozzon létre, többször megjelenítve különböző beállításokkal. Az összes kép a paramétereivel együtt vesszővel elválasztva jelenik meg, a többi kép fölött megjelenő kép elsőként, az utolsó pedig a legalacsonyabb kép. Az 1. példa bemutatja, hogyan lehet három képet tartalmazó hátteret létrehozni.
1. példa: Három háttér
Ha a háttérhez külön-külön kell beállítani valamilyen stílustulajdonságot, például a háttér-méretet, mint a fenti példában, akkor az egyes háttér paraméterei vesszővel elválasztva jelennek meg. Ennek a példának az eredménye az ábrán látható. 1.
Rizs. 1. Háttér három képpel
Az egyes háttérképek lehetővé teszik a helyzetük megváltoztatását és animálását is, ahogy a 2. példában is látható.
2. példa: Animált háttér
Most nézzük meg, hogyan lehet egy kép segítségével kerettel rendelkező blokkot létrehozni (2. ábra). A blokk szélessége rögzített, a magassága a blokk tartalmának mennyiségétől függően változik.
Rizs. 2. Kézzel rajzolt keret
Az ábrán jól látható a kivágandó felső és alsó rész grafikus szerkesztőés helyezze el vízszintesen. A középső rész úgy van kiválasztva, hogy függőlegesen, varratok nélkül ismétlődjön. A kép határozottan ismétlődő mintázatú, így nem okozhat nehézséget a kiemelése. Az eredmény egy előkészített kép lesz (3. ábra). A kockás mező az átlátszóságot jelzi, lehetővé teszi, hogy színes hátteret állítson be a képekkel együtt, és egyszerűen módosítsa azt stílusokon keresztül.
Rizs. 3. A háttérhez készített kép
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 akarjuk, hogy a blokk teteje és alja ne fedje át egymást, ezért ezeket helyezzük előtérbe (3. példa). A háttérszín utoljára van megadva.
3. példa: Több háttérkép
Huitzilopochtli - „a kolibri varázslója”, a háború és a nap istene.
Tezcatlipoca - „dohányzó tükör”, az aztékok fő istene.
Emberáldozatot hoztak mindkét istennek.
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. Az utolsó szín a blokk átlátszó központi részén látható (4. ábra).
Tekintse át
