Niquelao » Bloggarkiv » Mer om CSS 3: background-origin og background

Disse to egenskapene hjelper oss med å kontrollere både utgangspunktet for plassering av bakgrunnsbilder, samt muligheten til å vise dem under kantlinjen. background-origin Angir utgangspunktet som bakgrunnens posisjon beregnes fra, altså koordinatopprinnelsen for egenskapen background-position. De mulige verdiene er: border-box: Bakgrunnens posisjon bestemmes i forhold til området som inkluderer kantlinjen (oversatt betyr det at hvis kantlinjen er stiplet, vil bakgrunnen kunne synes under den). padding-box: Dette er standardverdien og angir bakgrunnens posisjon i forhold til området som inkluderer padding (tilsvarende dagens oppførsel i CSS 2.1). content-box: Bakgrunnen posisjoneres i forhold til innholdsområdet. background-clip Angir området der bakgrunnen skal vises og godtar to mulige verdier: border-box: Dette er standardverdien og inkluderer bakgrunnen i området som opptas av kantlinjen. padding-box: Begrenser området der bakgrunnen vises til det som opptas av padding og innhold.

Det betyr at selv om bakgrunnens opprinnelse er ved kantlinjen, vil ikke bildet vises under denne. Forklaringen Som alltid er det best å se på eksempler i form av skjermbilder for å forklare begge egenskapene. I disse har jeg simulert plassen et element opptar (i henhold til boksmodellen), det vil si kantlinje (tykk grå stiplet linje), padding (mellomrommet mellom kantlinjen og den tynne stiplete linjen) og innhold (avgrenset av den stiplete linjen). La oss begynne: Hva er forskjellen på følgende bildepar?

Det er åpenbart at forskjellen mellom de to er at bakgrunnen vises under kantlinjen i det ene tilfellet, mens den ikke gjør det i det andre. CSS-koden for den første er: background-origin: border-box; background-clip: border-box; …og for den andre: background-origin: border-box; background-clip: padding-box; Og nå, hva med forskjellen mellom følgende bilder? Her ligger forskjellen i bakgrunnens opprinnelse.

I den første inkluderer opprinnelsen kantlinjen: background-origin: border-box; …mens den i den andre ville være ved padding: background-origin: padding-box; Til slutt, hva er forskjellen nå? : Igjen er det helt klart. Det første bildet har, akkurat som det første i bildeparet over, bakgrunnens opprinnelse i kantlinjeområdet, mens det andre har opprinnelsen i innholdsområdet: background-origin: border-box; og background-origin: content-box; Hvis nettleseren din er en nyere versjon av Firefox, Chrome, Safari eller Konqueror, kan du gå til siden med et eksempel på bruk av begge egenskapene.

Hvis du bruker en annen (for eksempel Internet Explorer eller Opera), kan du også åpne eksemplet, men da vil du se resultatet når disse egenskapene ikke støttes. Merk: Mozilla og WebKit støtter disse egenskapene eksperimentelt med sine egne syntakser.

Som jeg allerede har forklart i en annen artikkel, lar CSS 3 oss inkludere mer enn ett bakgrunnsbilde. Egenskapene background-origin og background-clip tillater at man angir en verdi for hvert av bildene som brukes. For å avslutte vil jeg igjen nevne noe om bakgrunnsbildet som er brukt i eksemplene. Det er en deilig fruktkake laget av Dolores som jeg vant fordi jeg var snill… ok, jeg vant den rett og slett… vel, jeg vant den egentlig ikke, men jeg nøt den som et barn.

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

Mer om CSS 3: background-origin og background-clip Kategori: CSS —> 1 kommentar Tweets that mention Niquelao » Arkiv for webloggen » Mer om CSS 3: background-origin og background-clip — Topsy.com 14. desember 2009 […] This post was mentioned on Twitter by Jorge Rumoroso, Juanjo Fernández. Juanjo Fernández said: RT @rumoroso: #niquelao Mer om CSS 3: background-origin og background-clip http://bit.ly/5wKoQt #CSS3 […] Du kan følge kommentarene takket være RSS 2.0-strømmen.

Du kan også sende en trackback fra ditt eget nettsted. Forrige artikkel: Fish eye menu only with CSS Transform and Transition —> —> —> 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.