Niquelao » Webbloggarkiv » Flera bakgrundsbilder med CSS 3

» Arkiv för webloggen » Flera bakgrundsbilder med CSS 3 Niquelao Flera bakgrundsbilder med CSS 3 25 november 2009, av Rumoroso En av nyheterna som CSS 3 introducerar (och som jag välkomnar med öppna armar) är möjligheten att inkludera flera bakgrundsbilder för samma element ( http://www.w3.org/TR/css3-background/#layering ). Hittills har vi, om vi velat kombinera mer än en bild som bakgrund, bara kunnat använda någon av de element vi hade på vår sida och applicerat en bakgrund på var och ett för att få önskat resultat.

Ibland har vi till och med använt extra markup, vilket försämrat webbkvaliteten genom att lägga till markup enbart för presentativa ändamål. Men nu förändras läget… Tack vare CSS 3 kan vi, om vi vill använda två eller fler bakgrundsbilder, helt enkelt lägga till sökvägen för var och en av dem i egenskapen background-image: och separera dem med kommatecken. Till exempel: background-image: url(‘fondo1.png’), url(‘fondo2.png’) Med något så enkelt som detta har vi deklarerat allt som krävs för att elementet vi applicerar det på ska ha båda bilderna som bakgrund.

Självklart väcker detta nya frågor… Överlappar de varandra? Kan de placeras på olika ställen? Går det att låta en upprepas längs en axel medan den andra undviker det? … …och svaret på alla dessa frågor är JA .

När det gäller överlappning är den första bilden som deklareras den som placeras närmast användaren . Därefter, bakom denna, placeras nästa bild (längs en axel vinkelrät mot skärmen), sedan nästa, och så vidare tills den sista bilden hamnar längst bak av alla. Det är som om varje bild placerades i sitt eget lager .

Om vi dessutom deklarerar en bakgrundsfärg kommer denna att placeras bakom alla använda bilder. När det gäller övriga frågor kan jag ge ett generellt svar, eftersom de alla uppstått utifrån de egenskaper vi vanligtvis använder, det vill säga positionering av bakgrundsbilden ( background-position ), beteende vid scrollning ( background-attachment ) och upprepning ( background-repeat ).

Om vi vill att varje bild ska ha ett specifikt värde behöver vi bara deklarera dem i följd och separera dem med kommatecken (precis som vi gjorde när vi deklarerade själva bilderna). Till exempel: background-image: url(‘fondo1.png’), url(‘fondo2.png’), url(‘fondo3.png’); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; Härmed deklarerar vi tre bakgrundsbilder; den första placeras uppe till vänster, den andra flyttas 150px åt höger och 200px nedåt, och den tredje placeras också till vänster och vertikalt centrerad.

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Beträffande upprepning kommer den första och den sista inte att upprepas, medan den andra upprepas längs den horisontella axeln. Men här tar ämnet inte slut. För oss som gillar att optimera kod (vilket vi borde göra alla), kan vissa deklarationer förkortas: background-position: 0 0, 150px 200px, left center; blir till: background-position: 0 0, 150px 200px, left; Ordet center tas bort.

Som vi alla vet (eller borde veta) antar ett ej deklarerat positionsvalue för bakgrunden standardvärdet centrerat ( center ), i detta fall vertikalt. background-repeat: no-repeat, repeat-x, no-repeat; blir till: background-repeat: no-repeat, repeat-x; Det tredje värdet kan tas bort. Anledningen är att när värden saknas upprepas listan över redan deklarerade värden tills det finns ett värde per bild (därför blir det första värdet no-repeat om listan börjar om). Men det går att optimera ytterligare genom att utnyttja shorthand-egenskapen background: : background: url(‘fondo1.png’) 0 0 no-repeat, url(‘fondo2.png’) 150px 200px repeat-x, url(‘fondo3.png’) left no-repeat; Som ni ser öppnar detta upp en hel värld av möjligheter för våra designer.

Vissa webbläsare, i sina aktuella versioner, börjar nu få stöd för flera bakgrundsbilder. Bland dessa finns Firefox (från och med version 3.6), Chrome , Safari och Konqueror . Om du använder någon av dessa kan du se resultatet i exemplet jag har förberett .

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Tyvärr finns det ännu inget stöd i Internet Explorer (vi får se om de inkluderar det i sin framtida version 9) eller i Opera. Nedan följer en skärmdump som visar hur exemplet ser ut när stöd finns (om du besöker sidan med en webbläsare utan stöd ser du endast den streckade ramen): Utöver det nämnda inkluderar CSS 3 även nya värden för några av de tidigare nämnda egenskaperna, samt nya egenskaper som kommer att ge stor flexibilitet åt våra designer. I en kommande artikel kommer jag att gå igenom dessa i detalj.

För att väcka er aptit nämner jag bara background-size … ja, det är precis vad ni tror! not: Jag antar att förutom artikelns tekniska innehåll är det mest lockande tårtan på fotot . För att göra er lite avundsjuka kan jag berätta att jag tog fotot själv och att det är en frukttårta som Dolores lagade till mig… Det är uppenbart att hon också behärskar konsten att styra presentationen, men jag kan också garantera att hon mestrar innehållshantering, för den var verkligen utsökt… Flera bakgrundsbilder med CSS 3 Kategori: CSS —> 4 kommentarer Flera bakgrundsbilder med CSS 3 26 november 2009 […] nu förändras läget… Flera bakgrundsbilder med CSS 3 […] Tweets som nämner Niquelao » Arkiv för webloggen » Flera bakgrundsbilder med CSS3 — Topsy.com 27 november 2009 […] Detta inlägg omnämndes på Twitter av Jorge Rumoroso och Juanjo Fernández.

Juanjo Fernández sa: RT @rumoroso: #niquelao Flera bakgrundsbilder med CSS 3 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » Arkiv för webloggen » CSS 3: Bakgrundsegenskaper 2 december 2009 […] stöd i de senaste versionerna av webbläsarna (som jag redan nämnde i inlägget med titeln Flera bakgrundsbilder med CSS 3), i vissa fall experimentellt (till exempel i Firefox via prefixet […] Niquelao » Arkiv för webloggen » Mer om CSS 3: background-origin och background-clip 13 december 2009 […] som jag redan förklarade i en annan artikel, låter CSS 3 oss inkludera mer än en bakgrundsbild.

Egenskaperna background-origin och background-clip tillåter att ett värde anges för var och en […] Du kan följa kommentarerna tack vare RSS 2.0-flödet . Du kan också skicka en trackback från din webbplats.

Föregående artikel: Ett extra stilgrepp i CSS-kursen Nästa artikel: CSS 3: Bakgrundsegenskaper —> —> —> Detta verk är licensierat under en Creative Commons-licens .

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.