Niquelao » Bloggarkiv » Flere bakgrunnsbilder med CSS 3

» Arkiv for webloggen » Flere bakgrunnsbilder med CSS 3 Niquelao Flere bakgrunnsbilder med CSS 3 25. november 2009, av Rumoroso En av nyhetene som introduseres med CSS 3 (og som jeg personlig setter stor pris på) er muligheten til å inkludere flere bakgrunnsbilder for ett og samme element ( http://www.w3.org/TR/css3-background/#layering ). Helt fram til nå, hvis vi ønsket å kombinere mer enn ett bilde som bakgrunn, var den eneste løsningen å bruke noen av elementene vi allerede hadde på siden, og anvende en bakgrunn på hvert enkelt av dem for å oppnå ønsket resultat.

I blant tydde vi til ekstra markup, noe som senket kvaliteten på nettstedet ved å legge inn kode utelukkende for presentasjonsformål. Men nå endrer alt seg… Takket være CSS 3 kan vi, dersom vi ønsker å bruke to eller flere bakgrunnsbilder, legge til filstien for hver enkelt av dem i egenskapen background-image:, adskilt med kommaer. For eksempel: background-image: url(‘fondo1.png’), url(‘fondo2.png’) Med noe så enkelt som dette har vi definert det som trengs for at elementet vi anvender det på, skal ha begge bildene som bakgrunn.

Selvfølgelig reiser dette nye spørsmål… Legges de oppå hverandre? Kan de posisjoneres på forskjellige steder? Kan det ene gjentas langs én akse mens det andre unngår dette? … …og svaret på alle disse spørsmålene er JA .

Når det gjelder overlapping, er det første bildet som deklareres som plasseres nærmest brukeren . Deretter, bak dette, plasseres det neste (langs en akse vinkelrett på skjermen), så det neste igjen, og slik fortsetter det helt til det siste bildet, som havner bakerst av alle. Det er som om hvert bilde legges i sitt eget lag .

Hvis vi i tillegg definerer en bakgrunnsfarge, vil denne plasseres bak samtlige bilder. Når det gjelder de øvrige spørsmålene, kan jeg gi et generelt svar, siden alle har oppstått ut fra tankegangen rundt de egenskapene vi vanligvis bruker, nemlig posisjonering av bakgrunnsbildet ( background-position ), oppførsel ved scrolling ( background-attachment ) og gjentakelse ( background-repeat ).

Hvis vi ønsker at hvert bilde skal ha sine egne verdier, trenger vi bare å deklarere dem etter hverandre, adskilt med kommaer (akkurat som vi gjorde da vi deklarerte selve bildene). For eksempel: 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; Her definerer vi tre bakgrunnsbilder: det første plasseres øverst til venstre, det andre flyttes 150 px mot høyre og 200 px nedover, mens det tredje også plasseres til venstre og sentreres vertikalt.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Når det gjelder gjentakelse, vil ikke det første og det siste bildet gjentas, mens det andre gjentas langs den horisontale aksen. Men temaet slutter ikke her. For oss som liker å optimalisere koden (og det bør vi alle gjøre), kan enkelte deklarasjoner forkortes: background-position: 0 0, 150px 200px, left center; blir til: background-position: 0 0, 150px 200px, left; Ordet center fjernes.

Som vi alle vet (eller bør vite), når en av posisjonsverdiene for bakgrunnen ikke deklareres, er standardverdien sentrering ( center ), i dette tilfellet vertikalt. background-repeat: no-repeat, repeat-x, no-repeat; blir til: background-repeat: no-repeat, repeat-x; Den tredje verdien kan fjernes. Årsaken er at når det mangler verdier, gjentas listen over allerede deklarerte verdier inntil det finnes én verdi per bilde (derfor starter listen på nytt, og den første verdien blir no-repeat ). Men det lar seg gjøre å optimalisere enda mer, ved å utnytte 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 dere ser, åpner alt dette for en rekke nye muligheter innen design.

Noen nettlesere, i sine nåværende versjoner, begynner å støtte flere bakgrunnsbilder. Blant disse finner vi Firefox (fra versjon 3.6), Chrome , Safari og Konqueror . Hvis du bruker en av disse, kan du se resultatet i eksempelet jeg har laget .

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

Dessverre finnes det foreløpig ingen støtte i Internet Explorer (det gjenstår å se om det kommer i den kommende versjon 9) eller i Opera. Nedenfor inkluderer jeg et skjermbilde som viser hvordan eksempelet ser ut når støtten er til stede (hvis du besøker siden med en nettleser uten støtte, vil du kun se den stiplete rammen): I tillegg til det som allerede er nevnt, inneholder CSS 3 også nye verdier for noen av de nevnte egenskapene, samt helt nye egenskaper som vil gi våre design stor fleksibilitet.

I en kommende artikkel vil jeg gå nærmere inn på disse. For å friste litt nevner jeg background-size … ja, det er akkurat det du tenker på! Merk: Jeg antar at bortsett fra det tekniske innholdet i artikkelen, er det mest fristende kaken på bildet .

For å gjøre deg litt misunnelig kan jeg fortelle at jeg tok bildet selv, og at det er en fruktkake Dolores lagde til meg… Det er åpenbart at hun også behersker kunsten å styre presentasjonen, men jeg kan dessuten garantere at hun mestrer innholdsstyring like godt, for kaken var himmelsk… Flere bakgrunnsbilder med CSS 3 Kategori: CSS —> 4 kommentarer Flere bakgrunnsbilder med CSS 3 26. november 2009 […] nå endrer alt seg… Flere bakgrunnsbilder med CSS 3 […] Tweeter som nevner Niquelao » Arkiv for webloggen » Flere bakgrunnsbilder med CSS3 — Topsy.com 27. november 2009 […] Dette innlegget ble nevnt på Twitter av Jorge Rumoroso og Juanjo Fernández.

Juanjo Fernández sa: RT @rumoroso: #niquelao Flere bakgrunnsbilder med CSS 3 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » Arkiv for webloggen » CSS 3: Bakgrunnsegenskaper 2. desember 2009 […] støtte i de nyeste versjonene av nettleserne (som jeg allerede nevnte i innlegget med tittelen Flere bakgrunnsbilder med CSS 3), i noen tilfeller som eksperimentelle funksjoner (for eksempel i Firefox via prefikset […] Niquelao » Arkiv for webloggen » Mer om CSS 3: background-origin og background-clip 13. desember 2009 […] som jeg allerede forklarte i en annen artikkel, lar CSS 3 oss inkludere mer enn ett bakgrunnsbilde.

Egenskapene background-origin og background-clip tillater at vi angir en verdi for hver […] Du kan følge kommentarene via RSS 2.0-feeden . Du kan også sende en trackback fra ditt eget nettsted. Forrige artikkel: Et ekstra stilgrep i CSS-kurset Neste artikkel: CSS 3: Bakgrunnsegenskaper —> —> —> Dette verket er lisensiert under en Creative Commons-lisens .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.