Hoe u meerdere CSS-achtergrondafbeeldingen kunt maken. Nieuwe manier: meerdere achtergronden met CSS3

Vandaag zullen we werken aan achtergrondafbeeldingen, die worden ingesteld met behulp van de eigenschap background en de aanvullende waarden ervan. Laten we een paar overwegen praktische voorbeelden bij de implementatie van het instellen van verschillende achtergronden voor hetzelfde element.

Dit kan in veel gevallen en momenten nuttig zijn. Vooral het gebruik van pseudo-elementen in dit geval, omdat deze zeer flexibel zijn qua parameters.

Veel achtergrondafbeeldingen

Om geen blok binnen een blok te creëren, is de eenvoudigste manier om één regel regels aan het hoofdelement toe te voegen en zo gewenst resultaat. Dit kan als een laconieke optie worden beschouwd, vooral omdat het de noodzaak wegneemt om erop in te gaan broncode. Alles wordt gedaan met alleen CSS.

Blockimg( achtergrond: url("img/img2.png"),/*most bovenste achtergrond en dan opeenvolgend*/ url("img/img3.png"), url("img/img1.jpg"); achtergrondpositie: 370px midden, 120px 150px, midden midden;/*positie van afbeeldingen*/ achtergrondherhaling: niet-herhaling;/*herhaal afbeelding*/ achtergrondkleur: #444;/*als achtergrondkleur nodig is*/ vakschaduw: 0 1px 2px rgba(0, 0, 0, 0.1); marge: 100px automatisch 15px; doosgrootte: randdoos; opvulling: 25px; breedte: 700px; min-hoogte: 300px; ) /*verkorte versie*/ .blockimg( achtergrond: url("img/img2.png") niet-herhaling 370px midden, url("img/img3.png") niet-herhaling 120px 150px, url("img/img1 .jpg") centraal midden zonder herhaling; marge: 100px auto 15px; doosgrootte: rand-box; opvulling: 25px; breedte: 700px; min-hoogte: 300px; )

Uitleg. We geven het element een achtergrondafbeelding, die het pad naar de locatie aangeeft. Gescheiden door komma's krijgen we de mogelijkheid om nog veel meer achtergronden in te voeren, zoals te zien is in de bovenstaande code. De volgorde van hun nummers bepaalt welke afbeelding bovenop de andere komt te staan. Dat wil zeggen, de eerste achtergrond is hoger dan alle andere, en dan volgt de reeks het principe van een gewone grafische editor.

Het volgende is aangegeven extra opties via individuele eigenschappen: positie, herhaling, grootte, indien nodig, dan kleur. Houd er ook rekening mee dat alle parameters gescheiden door komma's worden geschreven, in dezelfde volgorde als het nummer van de afbeelding.

En nog een laatste detail. De gehele code kan worden ingekort door slechts één generieke eigenschap te gebruiken, background . In het codevoorbeeld is er een tweede optie die laat zien hoe dit wordt gedaan.

Achtergrondafbeelding via pseudo-element

Vergeet ook niet alternatieve opties als zodanig zijn de voor en na pseudo-elementen. Het gebruik ervan heeft een positief voordeel: de afbeelding kan voorbij de rand van het element worden verplaatst, zodat deze niet op de rand verdwijnt, maar er bovenop komt. Deze techniek komt van pas als je zoiets als een 3D-effect wilt creëren.

Blockimg( achtergrond: url("img/img1.jpg") no-repeat;/*element achtergrond*/ position:relative;/*positioning area*/ margin: 200px auto 15px; box-size: border-box; opvulling: 25px; breedte:700px; min-hoogte: 300px; .blockimg::before( achtergrond: url("img/img1.png") midden midden zonder herhaling; onderkant: 0; inhoud: ""; hoogte: 295px; links: 0; positie: absoluut;/*absolute positionering*/ rechts: 0;

Uitleg. In feite is alles heel eenvoudig. We stellen de achtergrond van het hoofdelement op de gebruikelijke manier in. Vervolgens komt de sleutelpositie van eigendom: relatief; , dat het gebied definieert voor het verplaatsen van een ander element dat zich in het hoofdelement bevindt en de eigenschap position:absolute heeft; .

In plaats van een ander element, hoewel het formeel als een apart gebied geldt, gebruiken we een pseudo-element. We geven het een absolute positie en positioneren het op de plek die we nodig hebben.

Toen we aan het begin van deze sectie spraken over de eigenschap background-image, hebben we één functie niet genoemd: in CSS3 kun je meerdere achtergronden aan een enkel element toevoegen door ze simpelweg op te sommen, gescheiden door komma's. Dit is vooral nodig wanneer een element met een achtergrond een variabele breedte of hoogte heeft en de achtergrond zich moet aanpassen aan de grootte ervan.

Hoe u meerdere achtergronden in CSS instelt

Wij laten u een voorbeeld zien dat in de praktijk wellicht van pas kan komen. Laten we ons voorstellen dat we een tekstblok in een kader moeten plaatsen. Het kader vertegenwoordigt grafisch bestand in PNG-formaat:

Bij dit probleem is de hoogte van de tekst ons onbekend: we weten niet of de tekst volledig binnen het kader past of erbuiten gaat. Vanwege deze onbekende hoeveelheid kunnen we niet het risico nemen om het originele frameontwerp als achtergrond te gebruiken. Neus met behulp van CSS we kunnen dit frame naar behoefte laten verlengen. Om dit te doen, moet je de originele tekening indelen grafische editor in drie delen - boven, onder en midden - en sla elk bestand afzonderlijk op. Zoals dit:

Bovenkant van het frame

Onderkant van frame

Midden van het frame

We zullen de achtergrond maken met de afbeelding van het midden van het frame langs de as Y, terwijl de boven- en onderkant van het frame niet worden gedupliceerd. Laten we alle drie de achtergronden aan het element toevoegen en ook andere noodzakelijke stijlen opschrijven:

Frame (achtergrondafbeelding: url(https://goo.gl/tKyzHt), /* bovenste deel frames */ url(https://goo.gl/SUKymM), /* onderkant van het frame */ url(https://goo.gl/Km7HVV); /* midden van het frame */ achtergrondpositie: midden boven, /* positie van de bovenkant van het frame */ midden onder, /* positie van de onderkant van het frame */ midden boven; /* positie van het midden van het frame */ achtergrondherhaling: geen herhaling, /* de bovenkant van het frame wordt niet herhaald */ geen herhaling, /* de onderkant van het frame wordt niet herhaald */ repeat-y; /* het midden van het frame wordt verticaal herhaald */ background-size: contain; /* hier voor alle achtergronden dezelfde waarde*/ hoogte: automatisch; /* blokhoogte hangt af van de hoeveelheid inhoud */ breedte: 400px; /* blokbreedte staat vast */ opvulling: 30px; /* opvulling blok */ )

Elke achtergrond moet worden gescheiden door een komma, en pas na de laatste wordt een puntkomma geplaatst om het einde van de declaratie aan te geven. Voor het gemak en een betere leesbaarheid van de code raden we aan elke URL op een nieuwe regel op te geven.

Achtergrondafbeeldingen worden geplaatst volgens het principe van lagen: de een onder de ander. De achtergrond die als eerste wordt vermeld, is binnen bovenste laag, de tweede achtergrond bevindt zich onder de eerste, de derde bevindt zich onder de eerste twee. Daarom hebben we de foto met het midden van het frame helemaal aan het uiteinde geplaatst, zodat deze de boven- en onderkant niet overlapt.

Vervolgens worden in de code de eigenschappen background-position en background-repeat voor elke achtergrond ingesteld (dezelfde volgorde wordt aangehouden waarin de achtergrondafbeeldingen). Ja, je raadt het goed: indien nodig kun je de waarden van andere achtergrondeigenschappen opgeven, gescheiden door komma's. En als u één waarde op alle achtergronden moet toepassen, schrijft u deze zoals gewoonlijk (in ons geval de eigenschap background-size: contain).

Nou, laten we eens kijken naar het resultaat:

Zoals u kunt zien, is het kader correct gepositioneerd en omlijst het nu prachtig de inhoud van het blok. Wat gebeurt er als we de hoeveelheid tekst in het blok vergroten? Laten we eens kijken:

Het middelste deel van ons frame werd het vereiste aantal keren verticaal gedupliceerd, alsof het zich in de lengte uitstrekte en zich aanpaste aan de tekst. Dit is het effect dat niet zou kunnen worden gerealiseerd als we een solide afbeelding van het frame zouden gebruiken. Laten we er nog meer toevoegen meer tekst voor de duidelijkheid:

Natuurlijk kunnen meerdere achtergronden worden gebruikt om andere problemen op te lossen. We hebben slechts één voorbeeld uit vele getoond. Probeer je eigen situatie te bedenken en oefen met een groep achtergrondafbeeldingen.

Het gebruik van verkorte notaties

De achtergrondeigenschap accepteert ook meerdere waarden. Als u meerdere achtergronden gebruikt, kan een verkorte opname veel handiger zijn, omdat u dan moeilijker in de war raakt. Laten we onze code voor het frame herwerken:

Achtergrond: url(https://goo.gl/tKyzHt) midden boven / bevat geen herhaling, /* bovenkant van frame */ url(https://goo.gl/SUKymM) midden onder / bevat geen herhaling, / * onderkant van frame */ url(https://goo.gl/Km7HVV) midden boven / bevat repeat-y; /* midden van frame */

Deze optie ziet er minder omslachtig uit en is gemakkelijker te begrijpen.

U kunt er meerdere tegelijk aan één element toevoegen achtergrondafbeeldingen via de enkele achtergrondeigenschap. Hierdoor kun je rondkomen met één element om te creëren complexe achtergrond of één foto, waarbij deze meerdere keren wordt weergegeven verschillende instellingen. Alle afbeeldingen met hun parameters worden weergegeven, gescheiden door komma's, waarbij de afbeelding die boven de andere afbeeldingen wordt weergegeven als eerste wordt aangegeven en de laatste respectievelijk de laagste afbeelding. Voorbeeld 1 laat zien hoe u een achtergrond met drie afbeeldingen maakt.

Voorbeeld 1. Drie achtergronden

Als u afzonderlijk een stijleigenschap voor de achtergrond moet instellen, zoals background-size zoals in het bovenstaande voorbeeld, dan worden de parameters voor elke achtergrond weergegeven, gescheiden door komma's. Het resultaat van dit voorbeeld wordt getoond in Fig. 1.

Rijst. 1. Achtergrond met drie afbeeldingen

Met individuele achtergrondafbeeldingen kunt u hun positie wijzigen en ze ook animeren, zoals weergegeven in voorbeeld 2.

Voorbeeld 2. Geanimeerde achtergrond

Laten we nu bekijken hoe we één afbeelding kunnen gebruiken om een ​​blok met een frame te maken (Fig. 2). De breedte van het blok staat vast en de hoogte varieert afhankelijk van het volume van de inhoud van het blok.

Rijst. 2. Handgetekend kader

De figuur toont duidelijk de bovenste en onderste delen, die in een grafische editor moeten worden uitgesneden en horizontaal moeten worden geplaatst. Het middelste gedeelte is zo geselecteerd dat het verticaal wordt herhaald zonder naden. De afbeelding heeft een uitgesproken herhalend patroon, dus het zou geen probleem moeten zijn om deze te markeren. Het resultaat is een voorbereid beeld (Fig. 3). Het geruite veld geeft transparantie aan; u kunt samen met afbeeldingen een gekleurde achtergrond instellen en deze eenvoudig wijzigen via stijlen.

Rijst. 3. Afbeelding voorbereid voor de achtergrond

De achtergrond zelf wordt weergegeven door de eigenschap background, die ook de coördinaten van het gewenste fragment specificeert. De parameters van elke achtergrond worden weergegeven, gescheiden door komma's en in in dit geval hun volgorde is belangrijk. We willen dat de boven- en onderkant van het blok elkaar niet overlappen, dus plaatsen we ze eerst (voorbeeld 3). De achtergrondkleur wordt als laatste opgegeven.

Voorbeeld 3. Verschillende achtergrondafbeeldingen

De eerste achtergrond geeft de bovenrand van het blok weer, de tweede achtergrond - de onderkant en de derde - de verticale randen. De laatste kleur is de kleur die zichtbaar is in het transparante centrale deel van het blok (Fig. 4).

Nieuwe manier: meerdere achtergronden met CSS3

Ik gebruik vier doorschijnende PNG-afbeeldingen om de ruimteachtergrond te creëren die op de Moon-site wordt gebruikt. Ze zijn allemaal gelaagd bovenop het lichaamselement, de een op de ander, om een ​​gevoel van ruimte te creëren wanneer de gebruiker het formaat van het browservenster aanpast.

In afb. 5.03 toont alle gebruikte afbeeldingen:

1) stofwolken (clouds.png);

2) blauw-roze verloop (space-bg.png);

3) sterrenlaag (stars-1.png);

4) nog een laag willekeurig verspreide sterren(sterren-2.png).

Rijst. 5.03. Vier doorschijnende PNG-achtergrondafbeeldingen die zich op de achtergrond van de website met de maan bevinden

Meerdere achtergrondsyntaxis

Het plaatsen van deze vier afbeeldingen als achtergrond van het body-element is heel eenvoudig met behulp van de nieuwe CSS3-syntaxis:

lichaam (achtergrond:

D. Siderholm. "CSS3 voor webontwerpers"

De vier afbeeldingen zijn gelaagd (wolken onderaan, sterren bovenaan) in een door komma's gescheiden lijst (merk op dat de lijst begint met de afbeelding die 'het dichtst' bij de gebruiker staat). Elke afbeelding wordt horizontaal gedupliceerd en op verschillende horizontale posities ingesteld (met behulp van positieve en negatieve waarden), zodat elke laag met zijn eigen snelheid beweegt naarmate het formaat van het browservenster wordt gewijzigd. Ten slotte wordt hun positie op de pagina vastgelegd met behulp van de waarde fixed .

De bijna zwarte kleur #1a1a1a wordt helemaal aan het einde toegevoegd als een aparte achtergrondkleurregel.

Dat is alles (Fig. 5.04). Het is geweldig dat we het zonder onnodige markeringen hebben kunnen doen. Al deze afbeeldingen worden weergegeven in het body-element, zodat ze achter de pagina-inhoud komen te staan, maar we hoefden ze niet in extra hulplagen te wikkelen.

Rijst. 5.04. Vier PNG-afbeeldingen zijn op elkaar gelaagd, net als het donker grijs achtergrond

Browser-ondersteuning

Zoals vermeld in het eerste hoofdstuk worden meerdere achtergronden ondersteund in Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+ en IE9 Beta. Ze zijn dus vergelijkbaar met veel van de andere CSS-eigenschappen die we in dit boek hebben gebruikt.

We hebben ervoor gekozen om deze geweldige CSS3-functie te gebruiken in een niet-kritisch deel van het ontwerp vanwege imperfecte ondersteuning: om de achtergrond van de pagina te verbeteren, om een ​​nieuwe interactie te creëren bij het wijzigen van de grootte van het venster - een parallax-effect voor degenen die het kunnen ervaren.

Terugval voor alle browsers

Browsers die nog geen meerdere achtergronden ondersteunen, negeren de eigenschap background volledig. Daarom hebben we de eigenschap backgroundcolor afzonderlijk gedefinieerd.

D. Siderholm. "CSS3 voor webontwerpers"

In afb. Figuur 5.05 laat zien hoe de site er in IE7 uitziet: meerdere achtergronden worden genegeerd en alleen de donkergrijze achtergrond die is opgegeven door de eigenschap background-color wordt weergegeven.

Rijst. 5.05. IE7 negeert een eigenschap die meerdere achtergronden definieert en toont alleen de donkergrijze achtergrond die is opgegeven door de eigenschap background-color

Natuurlijk werkt alles zoals verwacht, maar het feit dat de volumetrische achtergrond verloren gaat, is niet goed. De oplossing is om eerst één enkele fallback-achtergrond in te stellen - voor browsers (zoals IE7 en 8) die niet meerdere achtergronden ondersteunen. U kunt deze eigenschap vervolgens opnieuw declareren - deze keer met meerdere achtergronden (IE negeert deze).

achtergrond: url(../img/space-bg.png) repeat-x vast -80% 0;achtergrond:

url(../img/stars-1.png) herhaal-x vast -130% 0, url(../img/stars-2.png) herhaal-x vast 40% 0, url(../img/ space-bg.png) herhaal-x vast -80% 0, url(../img/clouds.png) herhaal-x vast 100% 0; achtergrondkleur: #1a1a1a;

Voor een terugval op één afbeelding kunt u een van de afbeeldingen kiezen die in de meervoudige advertentie worden gebruikt, of u kunt verder gaan en één afbeelding maken die alle vier de afbeeldingen combineert.

Voor de Moon-site heb ik besloten space-bg.png te gebruiken - een kleurverloop (Fig. 5.06), waardoor een achtergrondoptie zonder sterren en wolken wordt weergegeven in browsers die nog niet meerdere achtergronden ondersteunen. Zeer toepasselijk.

D. Siderholm. "CSS3 voor webontwerpers"

Rijst. 5.06. Dankzij het fallback-beeld op de achtergrond in IE7 is het ruimtegevoel gedeeltelijk hersteld

• Handleiding

We hebben de mogelijkheden van de CSS3 Achtergronden en Randen-module al besproken, waarbij we hebben gekeken naar het werken met schaduwen (box-shadow). Vandaag zullen we het iets over een ander hebben interessante kans- meerdere afbeeldingen op de achtergrond gebruiken.

Achtergrondcompositie

Er zijn veel redenen waarom u überhaupt meerdere afbeeldingen op de achtergrond zou willen samenstellen, waarvan de belangrijkste zijn:

• verkeersbesparing op afbeeldingsgrootte als individuele afbeeldingen weegt in totaal minder dan een afbeelding met afgeplatte lagen, en
• behoefte aan zelfstandig gedrag individuele lagen bijvoorbeeld bij het implementeren van parallaxeffecten.

Klassieke aanpak

Een blok met de klasse "vissen" in "zeemeermin" is uitsluitend bedoeld voor demonstratiedoeleinden.

Nu enkele stijlen:
.sample1 .sea, .sample1 .zeemeermin, .sample1 .fishing ( hoogte:300px; breedte:480px; positie: relatief; ) .sample1 .sea ( achtergrond: url(media/sea.png) repeat-x linksboven; ) .sample1 .mermaid ( achtergrond: url(media/mermaid.svg) repeat-x linksonder; ) .sample1 .fish ( achtergrond: url(media/fish.svg) no-repeat; hoogte:70px; breedte:100px; links : 30px; bovenaan: 90px; positie: absoluut ) .sample1 .fishing ( achtergrond: url(media/fishing.svg) no-repeat rechtsboven 10px; )

Resultaat:

IN in dit voorbeeld drie geneste achtergronden en één blok met vissen naast de “achtergrond”-blokken. In theorie kunnen vissen bijvoorbeeld verplaatst worden met met behulp van JavaScript of CSS3-overgangen/animaties.

Overigens gebruikt dit voorbeeld voor ".fishing" de nieuwe syntaxis voor achtergrondpositionering, ook gedefinieerd in CSS3:
achtergrond: url(media/fishing.svg) no-repeat rechtsboven 10px;
Op huidige moment het wordt ondersteund in IE9+ en Opera 11+, maar niet in Firefox 10 en Chrome 16. Gebruikers van de laatste twee browsers zullen de vis dus nog niet kunnen vangen.

Meerdere achtergronden

En de bijbehorende stijlen:
.sample2 .sea ( hoogte:300px; breedte:480px; positie: relatief; achtergrondafbeelding: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); achtergrondpositie: rechtsboven 10px, linksonder, linksboven; achtergrondherhaling: niet herhalen, herhaal-x, herhaal-x ; ) .sample2 .fish ( achtergrond: url("media/fish.svg ") niet-herhaling; hoogte:70px; breedte:100px; links: 30px; boven: 90px; positie: absoluut; )
Als u meerdere afbeeldingen wilt definiëren, moet u de regel voor achtergrondafbeeldingen gebruiken, waarbij de afzonderlijke afbeeldingen worden vermeld, gescheiden door komma's. Aanvullende regels, ook als lijst, kunt u voor elke afbeelding de positionering, herhalingen en andere parameters instellen. Let op de volgorde waarin de afbeeldingen worden weergegeven: lagen worden weergegeven van links naar rechts, van boven naar beneden.

Het resultaat is precies hetzelfde:

Eén regel

Stijlen:
.sample3 .sea ( hoogte:300px; breedte:480px; positie: relatief; achtergrondafbeelding: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); achtergrondpositie: rechtsboven 10px, linksonder, 30px 90px, linksboven; achtergrondherhaling: niet-herhaling, herhaal-x ; )

Ik zal geen foto van het resultaat laten zien - geloof me, het valt samen met de twee foto's hierboven. Maar let opnieuw op de stijlen, vooral op "achtergrondherhaling" - als een deel van de lijst aan het einde volgens de specificatie ontbreekt, moet de browser de opgegeven lijst het vereiste aantal keren herhalen om overeen te komen met het aantal afbeeldingen in de lijst.

In dit geval is het gelijk aan deze beschrijving:
achtergrondherhaling: geen herhaling, herhaling-x, geen-herhaling, herhaal-x;

Nog korter

Sample4 .sea ( hoogte:300px; breedte:480px; positie: relatief; achtergrond: url("media/fishing.svg") rechtsboven 10px niet-herhaling, url("media/mermaid.svg") linksonder repeat-x , url("media/fish.svg") 30px 90px niet-herhaling, url("media/sea.png") repeat-x )

Maar houd er rekening mee dat je nu niet zomaar waarden kunt overslaan (tenzij ze overeenkomen met de standaardwaarde). Als je overigens de kleur van de achtergrondafbeelding wilt instellen, moet dit in de allerlaatste laag gebeuren.

Dynamische beelden

Trouwens, hier is een voorbeeld uit het leven - een thema met een paardenbloem in Yandex:


Als je de code bekijkt, zie je zoiets als dit:

...

Blokken met de klassen "b-fluff-bg", "b-fluff__cloud" en "b-fluff__item" bevatten achtergrondafbeeldingen die elkaar overlappen. Bovendien scrollt de achtergrond met wolken voortdurend en vliegen paardenbloemen over het scherm.

Kan dit herschreven worden met meerdere achtergronden? In principe wel, maar onder voorbehoud van 1) ondersteuning voor deze functie in de doelbrowsers en... 2) lees verder;)

Hoe voeg je dynamiek toe aan meerdere achtergronden? In een dergelijke situatie blijkt het handig te zijn dat de browser zich in de interne weergave verspreidt individuele parameters achtergrondafbeeldingen volgens de relevante regels. Voor positionering is er bijvoorbeeld “achtergrondpositie”, en voor verschuivingen is het voldoende om alleen dit te veranderen. Er zijn echter kosten verbonden aan het gebruik van meerdere afbeeldingen. Deze regel (en soortgelijke regels) vereist dat u de positie vermeldt voor alle achtergronden die voor uw blok zijn gedefinieerd, en u kunt dit niet selectief doen.

Om animatie aan onze visachtergrond toe te voegen, kunt u de volgende code gebruiken:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var zeemeerminX = 0; var t = 0; functie animatieLoop() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) zeemeerminX = 0;
visY = -10 + (10 * Math.cos(t * 0,091));
visX = 10 + (5 * Math.sin(t * 0,07));

sea.style.backgroundPosition = "boven" + visY + "px rechts" + visX + "px, " + zeemeerminX + "px onder," + vissenX + "px " + vissenY + "px, linksboven";

venster.requestAnimFrame(animationLoop);

Meerdere achtergrondafbeeldingen zijn nuttig in dergelijke scenario's, want hoewel we het alleen over de achtergrond hebben (en niet over de inhoud), kunnen we door het gebruik ervan voorkomen dat de html-code en DOM worden vervuilt. Maar alles heeft een prijs: daar kan ik niet omheen individuele elementen composities op naam, id, klasse of een andere parameter. Ik moet expliciet de volgorde van de elementen in de compositie in de code onthouden, en voor elke wijziging in een parameter van een element moet ik in feite een regel aan elkaar lijmen die de waarden van deze parameter voor alle elementen beschrijft en deze bijwerken voor de gehele compositie.

Sea.style.backgroundPosition = "boven" + visY + "px rechts" + visX + "px, " + zeemeerminX + "px onder," + vissenX + "px " + vissenY + "px, linksboven";

Ik ben er zeker van dat dit kan worden verpakt in handige javascript-code, die zorgt voor de virtualisatie van relaties met individuele lagen, terwijl de html-code van de pagina zo schoon mogelijk blijft.

Hoe zit het met de compatibiliteit?

U kunt Modernizr ook gebruiken om browsers aan te bieden die niet meerdere achtergronden ondersteunen alternatieve oplossingen. Zoals Chris Coyier in zijn bericht schreef over de laagvolgorde bij het gebruik van meerdere achtergronden, doe je zoiets als dit:

Multiplebgs body ( /* Geweldige meerdere BG-declaraties die de realiteit overstijgen en onzuivere kuikens */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
Als u twijfelt over het gebruik van JS om te bieden achterwaartse compatibiliteit, je kunt de achtergrond gewoon twee keer opgeven, maar dit heeft ook zijn nadelen in de vorm van mogelijk dubbele laars bronnen (dit hangt af van de implementatie van CSS-verwerking in specifieke browser):

/* meerdere bg-fallback */ achtergrond: #000 url(...) ...; /* Geweldige meerdere BG-declaraties die de realiteit overstijgen en onuitputtelijke kuikens */ achtergrond-url(...), url(...), url(...), #000 url(...);

Als u al aan Windows 8 denkt, houd er dan rekening mee dat u meerdere achtergronden kunt gebruiken bij het ontwikkelen van applicaties in metrostijl, omdat deze dezelfde engine gebruikt als IE10.

P.s. On-topic: ik kan het niet laten om het fenomenale artikel over het cicadeprincipe te onthouden.

Tags: tags toevoegen