på grund av dess bekvämlighet och mångsidighet, för att skilja den från andra element, läggs blockklassen till den (exempel 1).

Exempel 1: Två bakgrundsbilder

HTML5 CSS3 IE Cr Op Sa Fx

Resultatet av detta exempel visas i fig. 3.

Idag innehåller nästan varje webbdesign en vacker bakgrundsbild.

Varje layoutdesigner vet att det enklaste sättet att skapa en design är det bästa som kan vara. En av de enkla och bekväma teknikerna är att använda flera rader av css koda.

Det verkar som en liten sak, men ibland behöver du göra något komplicerat på ett enkelt sätt. Implementera till exempel flera bakgrunder med individuella parametrar, utan att använda extra div-block. Det vill säga att spara.

I den här artikeln kommer vi att titta på kodsyntaxen som stöder flera bakgrunder i ett enda element. Så här ser det ut i verkligheten:

CSS-kod för flera bakgrunder

Flera bakgrundsbilder implementeras med hjälp av flera värden css-parameter bakgrund, som är åtskilda av koma:

#multipleBGs ( background: url(photo1.png), url(photo2.png), url(photo3.png) ; background-repeat: no-repeat, no-repeat, repeat-y; background-position: 0 0, 30px 70px, höger upptill; bredd: 400px; höjd: 400px; kant: 1px fast #ccc; )

Jag försökte göra detsamma med en kort kod. Tyvärr fungerar det inte.

Dessutom kan du använda andra bakgrundsegenskaper (bakgrundsbilaga, bakgrundsklipp, bakgrundsbild, bakgrundsursprung, bakgrundsposition, bakgrundsupprepning, bakgrundsstorlek). Samma som med CSS-gradienter.

Det är allt! Jag hoppas att du gillade den här tekniken att skapa flera bakgrunder, utan att använda några hjälpelement. Ren semantisk kod.

Om du har några frågor, kommentarer eller förslag om denna teknik för att skapa flera bakgrunder, skriv i kommentarerna. Jag skulle också vilja testa för

). Idag ska vi prata lite om en annan intressant funktion - att använda flera bilder i bakgrunden.

Bakgrundskomposition

Det finns många anledningar till varför du överhuvudtaget vill komponera flera bilder i bakgrunden, av vilka de viktigaste är:

• sparar trafik på bildernas storlek, om enskilda bilder väger mindre totalt än en bild med tillplattade lager, och
• behovet av oberoende beteende hos enskilda lager, till exempel vid implementering av parallaxeffekter.

Det kan finnas andra rimliga skäl :)

Klassiskt tillvägagångssätt

Så vi måste placera flera bakgrundsbilder ovanpå varandra. Hur brukar detta problem lösas? Det är väldigt enkelt: för varje bakgrundsbild skapas ett block, till vilket motsvarande bakgrundsbild är tilldelad. Blocken är antingen kapslade inuti varandra eller placerade i en rad med lämpliga positioneringsregler. Här är ett enkelt exempel:

Ett block med klassen "fiske" inuti "sjöjungfru" är endast för demonstrationsändamål.

Nu några stilar:
.prov1 .hav, .prov1 .sjöjungfru, .prov1 .fiske (höjd:300px; bredd:480px; position: relativ; ) .prov1 .hav (bakgrund: url(media/sea.png) repetera-x övre vänster; ) .sample1 .mermaid ( bakgrund: url(media/sjöjungfru.svg) repeat-x längst ner till vänster; ) .sample1 .fish ( bakgrund: url(media/fish.svg) no-repeat; höjd:70px; bredd:100px; vänster : 30px; top: 90px; position: absolut; ) .sample1 .fishing (bakgrund: url(media/fishing.svg) no-repeat övre högra 10px; )

Resultat:

I det här exemplet finns det tre kapslade bakgrunder och ett block med fiskar som ligger bredvid "bakgrunds"-blocken. I teorin kan fiskar flyttas till exempel med JavaScript eller CSS3 Transitions/Animations.

Förresten, det här exemplet för ".fishing" använder den nya syntaxen för bakgrundspositionering, även definierad i CSS3:
bakgrund: url(media/fishing.svg) no-repeat uppe till höger 10px;
Det stöds för närvarande i IE9+ och Opera 11+, men stöds inte i Firefox 10 och Chrome 16. Så användare av de två senaste webbläsarna kommer inte att kunna fånga fisken ännu.

Flera bakgrunder

Ett nytt alternativ som lagts till CSS3 kommer till räddningen - möjligheten att definiera flera bakgrundsbilder för ett element. Det ser ut så här:

Och motsvarande stilar:
.sample2 .sea (höjd:300px; bredd:480px; position: relativ; bakgrundsbild: url("media/fishing.svg"), url("media/sjöjungfru.svg"), url("media/hav. png"); bakgrundsposition: upptill höger 10px, nedre vänster, upptill vänster; bakgrundsupprepning: no-repeat, repeat-x, repeat-x ; ) .sample2 .fish ( background: url("media/fish.svg ") ingen upprepning; höjd:70px; bredd:100px; vänster: 30px; topp: 90px; position: absolut;)
För att definiera flera bilder måste du använda bakgrundsbildregeln, som listar de enskilda bilderna separerade med kommatecken. Ytterligare regler, även en lista, kan ställa in positionering, upprepningar och andra parametrar för varje bild. Notera i vilken ordning bilderna listas: lager listas från vänster till höger från överst till längst ned.

Resultatet är exakt detsamma:

En regel

Om fisken inte behöver separeras i ett separat block för efterföljande manipulationer, kan hela bilden skrivas om med en enkel regel:

Stilar:
.sample3 .sea (höjd:300px; bredd:480px; position: relativ; bakgrundsbild: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); bakgrundsposition: upptill höger 10px, nedre vänster, 30px 90px, övre vänster; background-repeat: no-repeat, repeat-x ; )

Jag kommer inte att visa en bild på resultatet - tro mig, det sammanfaller med de två bilderna ovan. Men var uppmärksam på stilarna igen, särskilt "background-repeat" - enligt specifikationen, om en del av listan i slutet saknas, måste webbläsaren upprepa den angivna listan det antal gånger som krävs för att matcha antalet bilder i listan.

I det här fallet motsvarar det denna beskrivning:
bakgrund-upprepning: ingen-upprepa, upprepa-x, ingen-upprepa, upprepa-x;

Ännu kortare

Om du kommer ihåg CSS 2.1, definierade den möjligheten att beskriva bakgrundsbilder i en kort form. Vad sägs om flera bilder? Detta är också möjligt:

Sample4 .sea ( höjd:300px; width:480px; position: relativ; bakgrund: url("media/fishing.svg") övre högra 10px no-repeat, url("media/mermaid.svg") nedre vänster repeat-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Men observera att nu kan du inte bara hoppa över värden (om de inte matchar standardvärdet). Förresten, om du vill ställa in färgen på bakgrundsbilden måste detta göras i det allra sista lagret.

Dynamiska bilder

Om sammansättningen är statisk eller dynamisk som mest beroende på storleken på behållaren, så förenklar uppenbarligen flera bakgrunder siddesignen. Men vad händer om du behöver arbeta med enskilda delar av kompositionen oberoende av javascript (flytta, rulla, etc.)?

Förresten, här är ett exempel från livet - ett tema med en maskros i Yandex:


Om du tittar på koden kommer du att se något sånt här:

...

Block med klasserna "b-fluff-bg", "b-fluff__cloud" och "b-fluff__item" innehåller bakgrundsbilder som överlappar varandra. Dessutom rullar bakgrunden med moln hela tiden, och maskrosor flyger över skärmen.

Kan detta skrivas om med flera bakgrunder? I princip ja, men med förbehåll för 1) stöd för denna funktion i målwebbläsarna och... 2) läs vidare;)

Hur lägger man till dynamik till flera bakgrunder? I en sådan situation visar det sig vara bekvämt att webbläsaren i den interna representationen distribuerar de individuella parametrarna för bakgrundsbilderna enligt lämpliga regler. Till exempel, för positionering finns "bakgrundsposition", och för skift räcker det att bara ändra detta. Det finns dock en kostnad för att använda flera bilder - denna regel (och vilken som helst liknande) kräver att du listar positionen för alla bakgrunder som definierats för ditt block, och du kan inte göra detta selektivt.

För att lägga till animation till vår fiskbakgrund kan du använda följande kod:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; funktion animationLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sjöjungfruX = 0; fishY = -10 + (10 * Math.cos(t * 0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "överst " + fishY + "px höger " + fishX + "px, " + mermaidX + "px botten," + fishesX + "px " + fishesY + "px, övre vänster"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Var
window.requestAnimFrame = (function() ( returnera window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window.backall, 6(0c00callback,Timeout) ); )); ))();

Och förresten, animationer kan också göras med hjälp av CSS3 Transitions/Animations, men detta är ett ämne för en separat diskussion.

Parallax och interaktivitet

Slutligen kan liknande manövrar enkelt lägga till parallaxeffekter eller interaktiv interaktion med bakgrunden:

Flera bakgrundsbilder är användbara i sådana scenarier, eftersom medan vi bara pratar om bakgrunden (och inte innehållet), tillåter deras användning oss att undvika nedskräpning av HTML-koden och DOM. Men allt kommer till ett pris: jag kan inte komma åt enskilda kompositionselement med namn, id, klass eller någon annan parameter. Jag måste uttryckligen komma ihåg ordningen på element i kompositionen i koden, och för varje ändring av någon parameter av något element måste jag faktiskt limma ihop en rad som beskriver värdena för denna parameter för alla element och uppdatera den för hela kompositionen.

Sea.style.backgroundPosition = "överst " + fishY + "px höger " + fishX + "px, " + mermaidX + "px botten," + fishesX + "px " + fishesY + "px, övre vänster";

Jag är säker på att detta kan lindas in i praktisk javascript-kod, som tar hand om virtualiseringen av relationer med enskilda lager, samtidigt som sidans html-kod lämnas så ren som möjligt.

Hur är det med kompatibilitet?

Alla moderna versioner av populära webbläsare, inklusive IE9+, stöder flera bilder (du kan till exempel kontrollera Caniuse).

Du kan också använda Modernizr för att tillhandahålla alternativa lösningar för webbläsare som inte stöder flera bakgrunder. Som Chris Coyier skrev i sitt inlägg om lagerordning när du använder flera bakgrunder, gör något så här:

Multiplebgs body ( /* Fantastiska flera BG-deklarationer som överskrider verkligheten och tillför brudar */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Om du är orolig för att använda JS för att tillhandahålla bakåtkompatibilitet kan du helt enkelt deklarera bakgrund två gånger, även om detta också har sina nackdelar i form av eventuell dubbelladdning av resurser (detta beror på implementeringen av css-bearbetning i en viss webbläsare):

/* multiple bg fallback */ bakgrund: #000 url(...) ...; /* Fantastiska flera BG-deklarationer som överskrider verkligheten och tillför brudar */ bakgrunds-url(...), url(...), url(...), #000 url(...);

Om du redan har börjat tänka på Windows 8, kom ihåg att du kan använda flera bakgrunder när du utvecklar applikationer i metrostil, eftersom den använder samma motor som IE10.

P.s. På ämnet: Jag kan inte låta bli att komma ihåg den fenomenala artikeln om .

Idag kommer vi att arbeta med bakgrundsbilder, som ställs in med hjälp av bakgrundsegenskapen och dess tilläggsvärden. Låt oss titta på ett par praktiska exempel på att installera flera bakgrunder för samma element.

Detta kan vara användbart i många fall och stunder. Speciellt användningen av pseudoelement i detta fall, eftersom de är mycket flexibla i parametrar.

Många bakgrundsbilder

För att inte skapa ett block inom ett block är det enklaste sättet att lägga till en rad regler till huvudelementet och på så sätt få önskat resultat. Vi kan betrakta detta som ett lakoniskt alternativ, särskilt eftersom det eliminerar behovet av att återigen gå in källa. Allt kommer att göras med enbart CSS.

Blockimg( background: url("img/img2.png"),/*översta bakgrunden och sedan sekventiellt*/ url("img/img3.png"), url("img/img1.jpg"); background-position : 370px center, 120px 150px, center center;/*position av bilder*/ background-repeat: no-repeat;/*upprepa bild*/ bakgrundsfärg: #444;/*om bakgrundsfärg behövs*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); marginal: 100px auto 15px; boxstorlek: border-box; stoppning: 25px; bredd:700px; min-höjd: 300px; ) /*förkortad version*/. blockimg ( bakgrund: url("img/img2.png") no-repeat 370px center, url("img/img3.png") no-repeat 120px 150px, url("img/img1.jpg") no-repeat center mitten ; marginal: 100px automatiskt 15px; boxstorlek: border-box; stoppning: 25px; bredd:700px; min-höjd: 300px;)

Förklaring. Vi ger elementet en bakgrundsbild som anger vägen till dess plats. Separerade med kommatecken ges vi möjlighet att ange många fler bakgrunder, vilket kan ses i koden ovan. Ordningen på deras nummer avgör vilken bild som kommer att ligga ovanpå de andra. Det vill säga, den första bakgrunden är högre än alla andra, och sedan följer sekvensen principen för en vanlig grafisk editor.

Därefter specificeras ytterligare parametrar genom individuella egenskaper: position, upprepning, storlek och, om nödvändigt, färg. Observera också att alla parametrar skrivs åtskilda med kommatecken, i samma ordning som bildens nummer.

Och en sista detalj. Hela koden kan förkortas genom att bara använda en generisk egenskap, bakgrund . Det finns ett andra alternativ i kodexemplet som visar hur detta görs.

Bakgrundsbild via pseudoelement

Glöm inte heller bort alternativa alternativ som sådana är före och efter pseudo-element. Det finns en positiv fördel med deras användning - bilden kan flyttas bortom kanten av elementet, så att den inte försvinner vid gränsen, utan ligger ovanpå den. Denna teknik kommer att vara praktisk om du behöver skapa något som en 3D-effekt.

Blockimg( background: url("img/img1.jpg") no-repeat;/*element bakgrund*/ position:relative;/*positioneringsområde*/ marginal: 200px auto 15px; boxstorlek: border-box; utfyllnad: 25px; width:700px; min-height: 300px; ) .blockimg::before( background: url("img/img1.png") ingen upprepning i mitten; botten: 0; innehåll: ""; höjd: 295px; vänster: 0; position: absolut;/*absolut positionering*/ höger: 0; topp: -150px; )

Förklaring. Faktum är att allt är väldigt enkelt. Vi ställer in bakgrunden till huvudelementet på vanligt sätt. Därefter kommer nyckelegenskapspositionen: relativ; , som definierar området för att flytta ett annat element som finns i huvudelementet och har egenskapen position:absolute; .

Istället för ett annat element, även om det formellt går som ett separat område, använder vi ett pseudoelement. Vi ger den en absolut position och placerar den på den plats vi behöver.