på grunn av dens bekvemmelighet og allsidighet, for å skille den fra andre elementer, legges blokkklassen til den (eksempel 1).

Eksempel 1: To bakgrunnsbilder

HTML5 CSS3 IE Cr Op Sa Fx

Resultatet av dette eksemplet er vist i fig. 3.

I dag inneholder nesten hvert nettsteddesign et vakkert bakgrunnsbilde.

Hver layoutdesigner vet at den enkleste måten å lage et design på er den beste som kan være. En av de enkle og praktiske teknikkene er å bruke flere linjer css kode.

Det virker som en liten ting, men likevel, noen ganger må du gjøre noe komplisert på en enkel måte. Implementer for eksempel flere bakgrunner med individuelle parametere, uten å bruke ekstra div-blokker. Det vil si å spare.

I denne artikkelen skal vi se på kodesyntaksen som støtter flere bakgrunner i et enkelt element. Slik ser det ut i det virkelige liv:

CSS-kode for flere bakgrunner

Flere bakgrunnsbilder implementeres ved hjelp av flere verdier css-parameter bakgrunn, som er atskilt med koma:

#multipleBGs ( background: url(photo1.png), url(photo2.png), url(photo3.png) ; background-repeat: no-repeat, no-repeat, repeat-y; bakgrunnsposisjon: 0 0, 30px 70px, høyre øverst; bredde: 400px; høyde: 400px; kantlinje: 1px solid #ccc; )

Jeg prøvde å gjøre det samme med en kort kode. Dessverre fungerer det ikke.

I tillegg kan du bruke andre bakgrunnsegenskaper (bakgrunnsvedlegg, bakgrunnsklipp, bakgrunnsbilde, bakgrunnsopprinnelse, bakgrunnsposisjon, bakgrunnsgjenta, bakgrunnsstørrelse). Samme som med CSS-gradienter.

Det er alt! Jeg håper du likte denne teknikken for å lage flere bakgrunner, uten å bruke noen hjelpeelementer. Ren semantisk kode.

Hvis du har spørsmål, kommentarer eller forslag om denne teknikken for å lage flere bakgrunner, skriv i kommentarene. Også vil jeg gjerne teste for

). I dag skal vi snakke litt om en annen interessant funksjon - ved å bruke flere bilder i bakgrunnen.

Bakgrunnskomposisjon

Det er mange grunner til at du kanskje vil komponere flere bilder i bakgrunnen i det hele tatt, de viktigste er:

• sparer trafikk på størrelsen på bilder, hvis individuelle bilder veier mindre totalt enn et bilde med flate lag, og
• behovet for uavhengig oppførsel av individuelle lag, for eksempel ved implementering av parallakseeffekter.

Det kan være andre fornuftige grunner :)

Klassisk tilnærming

Så vi må plassere flere bakgrunnsbilder oppå hverandre. Hvordan løses dette problemet vanligvis? Det er veldig enkelt: for hvert bakgrunnsbilde opprettes en blokk som det tilsvarende bakgrunnsbildet er tildelt. Blokker er enten nestet inne i hverandre eller plassert på rad med passende posisjoneringsregler. Her er et enkelt eksempel:

En blokk med klassen "fiske" inni "havfrue" er kun til demonstrasjonsformål.

Nå noen stiler:
.sample1 .sea, .sample1 .havfrue, .sample1 .fishing (høyde:300px; width:480px; posisjon: relativ; ) .sample1 .sea (bakgrunn: url(media/sea.png) gjenta-x øverst til venstre;) .sample1 .mermaid ( bakgrunn: url(media/mermaid.svg) repeat-x nederst til venstre; ) .sample1 .fish ( bakgrunn: url(media/fish.svg) no-repeat; høyde:70px; width:100px; venstre : 30px; topp: 90px; posisjon: absolutt; ) .sample1 .fishing (bakgrunn: url(media/fishing.svg) ingen repetisjon øverst til høyre 10px; )

Resultat:

I dette eksemplet er det tre nestede bakgrunner og en blokk med fisk plassert ved siden av "bakgrunns"-blokkene. I teorien kan fisk flyttes, for eksempel ved hjelp av JavaScript eller CSS3 Transitions/Animations.

Forresten, dette eksemplet for ".fishing" bruker den nye syntaksen for bakgrunnsposisjonering, også definert i CSS3:
bakgrunn: url(media/fishing.svg) no-repeat øverst til høyre 10px;
Den støttes for øyeblikket i IE9+ og Opera 11+, men støttes ikke i Firefox 10 og Chrome 16. Så brukere av de to siste nettleserne vil ikke kunne fange fisken ennå.

Flere bakgrunner

Et nytt alternativ lagt til CSS3 kommer til unnsetning - muligheten til å definere flere bakgrunnsbilder for ett element. Det ser slik ut:

Og de tilsvarende stilene:
.sample2 .sea (høyde:300px; width:480px; posisjon: relativ; bakgrunnsbilde: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); bakgrunnsposisjon: øverst til høyre 10px, nederst til venstre, øverst til venstre; bakgrunns-repetisjon: ingen repetisjon, gjenta-x, gjenta-x ; ) .sample2 .fish ( bakgrunn: url("media/fish.svg ") ingen repetisjon; høyde:70px; bredde:100px; venstre: 30px; topp: 90px; posisjon: absolutt; )
For å definere flere bilder, må du bruke bakgrunnsbilderegelen, som viser de individuelle bildene atskilt med komma. Ytterligere regler, også en liste, kan angi posisjonering, repetisjoner og andre parametere for hvert bilde. Legg merke til rekkefølgen bildene er oppført i: lag er oppført fra venstre til høyre fra øverst til nederst.

Resultatet er nøyaktig det samme:

En regel

Hvis fisken ikke trenger å deles i en egen blokk for påfølgende manipulasjoner, kan hele bildet skrives om med en enkel regel:

Stiler:
.sample3 .sea (høyde:300px; width:480px; posisjon: relativ; bakgrunnsbilde: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); bakgrunnsposisjon: øverst til høyre 10 piksler, nederst til venstre, 30 piksler 90 piksler, øverst til venstre; bakgrunns-repetisjon: ingen repetisjon, gjenta-x ; )

Jeg vil ikke vise et bilde av resultatet - tro meg, det sammenfaller med de to bildene ovenfor. Men vær oppmerksom på stilene igjen, spesielt "background-repeat" - i henhold til spesifikasjonen, hvis en del av listen på slutten mangler, må nettleseren gjenta den angitte listen det nødvendige antallet ganger for å matche antall bilder i listen.

I dette tilfellet tilsvarer det denne beskrivelsen:
bakgrunns-repetisjon: ikke-gjenta, gjenta-x, ikke-gjenta, gjenta-x;

Enda kortere

Hvis du husker CSS 2.1, definerte den muligheten til å beskrive bakgrunnsbilder i en kort form. Hva med flere bilder? Dette er også mulig:

Sample4 .sea ( høyde:300px; width:480px; posisjon: relativ; bakgrunn: url("media/fishing.svg") øverst til høyre 10px no-repeat, url("media/mermaid.svg") nederst til venstre repetisjon-x , url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; )

Men merk at nå kan du ikke bare hoppe over verdier (med mindre de samsvarer med standardverdien). Skal du forresten sette fargen på bakgrunnsbildet må dette gjøres i det aller siste laget.

Dynamiske bilder

Hvis komposisjonen er statisk eller dynamisk på det meste avhengig av størrelsen på beholderen, så forenkler selvsagt flere bakgrunner sidedesignet. Men hva om du trenger å jobbe med individuelle elementer i komposisjonen uavhengig av javascript (flytte, bla osv.)?

Forresten, her er et eksempel fra livet - et tema med en løvetann i Yandex:


Hvis du ser på koden, vil du se noe slikt:

...

Blokker med klassene "b-fluff-bg", "b-fluff__cloud" og "b-fluff__item" inneholder bakgrunnsbilder som overlapper hverandre. Dessuten ruller bakgrunnen med skyer hele tiden, og løvetann flyr over skjermen.

Kan dette skrives om med flere bakgrunner? I prinsippet, ja, men med forbehold om 1) støtte for denne funksjonen i målnettleserne og... 2) les videre;)

Hvordan legge til dynamikk til flere bakgrunner? I en slik situasjon viser det seg å være praktisk at nettleseren i den interne representasjonen distribuerer de individuelle parametrene til bakgrunnsbildene i henhold til de aktuelle reglene. For posisjonering er det for eksempel "bakgrunnsposisjon", og for skift er det nok å endre bare dette. Det er imidlertid en kostnad for å bruke flere bilder - denne regelen (og enhver lignende) krever at du viser posisjonen for alle bakgrunner som er definert for blokken din, og du kan ikke gjøre dette selektivt.

For å legge til animasjon til fiskebakgrunnen vår kan du bruke følgende kode:
$(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; funksjon animasjonLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) havfrueX = 0; fishY = -10 + (10 * Math.cos(t * 0,091)); fishX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "øverst " + fishY + "px høyre " + fishX + "px, " + havfrueX + "px bunn," + fishesX + "px " + fishesY + "px, øverst til venstre"; window.requestAnimFrame(animasjonsløkke); ) animationLoop(); ));
Hvor
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) ( window. ); )); ))();

Og forresten, animasjoner kan også gjøres ved hjelp av CSS3 Transitions/Animations, men dette er et tema for en egen diskusjon.

Parallakse og interaktivitet

Til slutt kan lignende manøvrer enkelt legge til parallakseeffekter eller interaktiv interaksjon med bakgrunnen:

Flere bakgrunnsbilder er nyttige i slike scenarier, siden mens vi kun snakker om bakgrunnen (og ikke innholdet), lar bruken deres oss unngå forsøpling av html-koden og DOM. Men alt har en pris: Jeg har ikke tilgang til individuelle komposisjonselementer etter navn, id, klasse eller noen annen parameter. Jeg må eksplisitt huske rekkefølgen på elementene i sammensetningen i koden, og for hver endring i en hvilken som helst parameter til et element, må jeg faktisk lime sammen en linje som beskriver verdiene til denne parameteren for alle elementene og oppdatere den for hele komposisjonen.

Sea.style.backgroundPosition = "øverst " + fishY + "px høyre " + fishX + "px, " + havfrueX + "px bunn," + fishesX + "px " + fishesY + "px, øverst til venstre";

Jeg er sikker på at dette kan pakkes inn i praktisk javascript-kode, som vil ta seg av virtualisering av relasjoner med individuelle lag, samtidig som html-koden til siden blir så ren som mulig.

Hva med kompatibilitet?

Alle moderne versjoner av populære nettlesere, inkludert IE9+, støtter flere bilder (du kan sjekke for eksempel Caniuse).

Du kan også bruke Modernizr til å tilby alternative løsninger for nettlesere som ikke støtter flere bakgrunner. Som Chris Coyier skrev i sitt innlegg om lagrekkefølge når du bruker flere bakgrunner, gjør noe slikt:

Multiplebgs body ( /* Fantastiske flere BG-erklæringer som overskrider virkeligheten og henter damer */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Hvis du er bekymret for å bruke JS for å gi bakoverkompatibilitet, kan du ganske enkelt deklarere bakgrunn to ganger, selv om dette også har sine ulemper i form av mulig dobbel lasting av ressurser (dette avhenger av implementeringen av css-behandling i en bestemt nettleser):

/* multiple bg fallback */ bakgrunn: #000 url(...) ...; /* Fantastiske flere BG-erklæringer som overskrider virkeligheten og henter damer */ bakgrunns-url(...), url(...), url(...), #000 url(...);

Hvis du allerede har begynt å tenke på Windows 8, husk at du kan bruke flere bakgrunner når du utvikler applikasjoner i metrostil, siden den bruker samme motor som IE10.

P.s. Om emnet: Jeg kan ikke unngå å huske den fenomenale artikkelen om .

I dag skal vi jobbe med bakgrunnsbilder, som er satt ved hjelp av bakgrunnsegenskapen og dens tilleggsverdier. La oss se på et par praktiske eksempler på installasjon av flere bakgrunner for samme element.

Dette kan være nyttig i mange tilfeller og øyeblikk. Spesielt bruken av pseudoelementer i dette tilfellet, siden de er veldig fleksible i parametere.

Mange bakgrunnsbilder

For ikke å lage en blokk i en blokk, er den enkleste måten å legge til én linje med regler til hovedelementet og dermed få ønsket resultat. Vi kan vurdere dette som et lakonisk alternativ, spesielt siden det eliminerer behovet for å gå inn igjen kilde. Alt vil bli gjort med CSS alene.

Blockimg( background: url("img/img2.png"),/*øverste bakgrunn og deretter sekvensielt*/ url("img/img3.png"), url("img/img1.jpg"); bakgrunnsposisjon : 370px senter, 120px 150px, senter senter;/*posisjon av bilder*/ bakgrunns-repetisjon: ingen repetisjon;/*gjenta bilde*/ bakgrunnsfarge: #444;/*hvis bakgrunnsfarge er nødvendig*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 100px auto 15px; boksstørrelse: border-box; polstring: 25px; width:700px; min-høyde: 300px; ) /*forkortet versjon*/. blockimg ( background: url("img/img2.png") no-repeat 370px center, url("img/img3.png") no-repeat 120px 150px, url("img/img1.jpg") no-repeat center senter ; marg: 100px automatisk 15px; boksstørrelse: kantlinje; polstring: 25px; bredde: 700px; min-høyde: 300px; )

Forklaring. Vi gir elementet et bakgrunnsbilde, som indikerer banen til plasseringen. Atskilt med kommaer får vi muligheten til å legge inn mange flere bakgrunner, som kan sees i koden over. Rekkefølgen på tallene deres avgjør hvilket bilde som kommer over de andre. Det vil si at den første bakgrunnen er høyere enn alle de andre, og deretter følger sekvensen prinsippet til en vanlig grafisk editor.

Deretter spesifiseres ytterligere parametere gjennom individuelle egenskaper: posisjon, repetisjon, størrelse og, om nødvendig, farge. Vær også oppmerksom på at alle parametere er skrevet atskilt med komma, i samme rekkefølge som nummeret på bildet.

Og en siste detalj. Hele koden kan forkortes ved å bruke bare én generisk egenskap, bakgrunn . Det er et annet alternativ i kodeeksemplet som viser hvordan dette gjøres.

Bakgrunnsbilde via pseudoelement

Glem heller ikke alternative alternativer som sådan er før og etter pseudo-elementer. Det er en positiv fordel ved bruken - bildet kan flyttes utover kanten av elementet, slik at det ikke forsvinner ved grensen, men er på toppen av det. Denne teknikken vil være nyttig hvis du trenger å lage noe som en 3D-effekt.

Blockimg( background: url("img/img1.jpg") no-repeat;/*element bakgrunn*/ posisjon:relativ;/*posisjoneringsområde*/ margin: 200px auto 15px; boksstørrelse: border-box; polstring: 25px; width:700px; min-height: 300px; ) .blockimg::before( background: url("img/img1.png") ingen gjentakelse midt i midten; bunn: 0; innhold: ""; høyde: 295px; venstre: 0; posisjon: absolutt;/*absolutt posisjonering*/ høyre: 0; topp: -150px; )

Forklaring. Faktisk er alt veldig enkelt. Vi setter bakgrunnen til hovedelementet på vanlig måte. Deretter kommer nøkkelegenskapsposisjonen: relativ; , som definerer området for flytting av et annet element som er i hovedelementet og har egenskapen position:absolute; .

I stedet for et annet element, selv om det formelt sett går som et eget område, bruker vi et pseudo-element. Vi gir den en absolutt posisjon og plasserer den på det stedet vi trenger.