Niquelao » Weblog-arkiv » Mere om CSS 3: background-origin og background

Disse to egenskaber hjælper os med at kontrollere både det udgangspunkt, hvorfra baggrundsbilleder placeres, samt muligheden for at vise dem under kanten. background-origin Bestemmer det udgangspunkt, hvorfra baggrundens position beregnes, dvs. koordinatets oprindelse for egenskaben background-position. De mulige værdier er: border-box: baggrundens position bestemmes i forhold til området, der inkluderer kanten (oversat betyder det, at hvis kanten er stiplet, vil baggrunden kunne ses under den). padding-box: dette er standardværdien og bestemmer baggrundens position i forhold til området, der inkluderer padding (svarende til den nuværende i CSS 2.1). content-box: baggrunden placeres i forhold til indholdsområdet. background-clip Bestemmer det område, hvor baggrunden vises, og accepterer to mulige værdier: border-box: dette er standardværdien og inkluderer baggrunden i det område, som kanten optager. padding-box: begrænser det område, hvor baggrunden vises, til det, der optages af padding og indhold; det vil sige, at selvom baggrundens oprindelse er ved kanten, vil billedet ikke blive vist under denne.

Forklaringen Som altid er det bedst at ty til eksempler i form af skærmbilleder for at forklare begge egenskaber. I disse har jeg simuleret det rum, et element optager (i overensstemmelse med box-modellen), dvs. kant (tyk grå stiplet linje), padding (mellemrummet mellem kanten og den tynde stiplede linje) og indhold (afgrænset af den stiplede linje). Lad os begynde: Hvad er forskellen på følgende par af billeder? Det er åbenlyst, at forskellen mellem de to er, at baggrunden i det ene billede vises under kanten, mens den i det andet ikke gør.

CSS’en til den første er: background-origin: border-box; background-clip: border-box; …og til den anden: background-origin: border-box; background-clip: padding-box; Og hvad så med forskellen mellem følgende billeder? Her ligger forskellen i baggrundens oprindelse. I den første inkluderer oprindelsen kanten: background-origin: border-box; …mens den i den anden ville være i padding: background-origin: padding-box; Endelig, hvad er forskellen nu? : Igen er det helt klart.

Det første billede har, ligesom det første i parret af tidligere eksempler, baggrundens oprindelse i kantområdet, mens det andet har sin oprindelse i indholdsområdet: background-origin: border-box; og background-origin: content-box; Hvis din browser er en nyere version af Firefox, Chrome, Safari eller Konqueror, kan du besøge siden med et eksempel på anvendelsen af begge egenskaber. Hvis du bruger en anden (f.eks. Internet Explorer eller Opera), kan du også få adgang til eksemplet, men i dette tilfælde vil det være for at se resultatet, når disse egenskaber ikke understøttes.

Bemærk: Mozilla og WebKit understøtter disse egenskaber eksperimentelt med deres specifikke syntakser. Som jeg allerede har forklaret i en anden artikel, vil vi med CSS 3 kunne inkludere mere end ét baggrundsbillede.

Egenskaberne background-origin og background-clip tillader angivelse af en værdi for hvert af de billeder, der bruges. Til sidst vil jeg igen kommentere noget vedrørende det baggrundsbillede, der er brugt i eksemplerne. Det er en dejlig frugtkage, som Dolores har lavet, og som jeg vandt, fordi jeg var sød… okay, jeg vandt den bare… nå, jeg vandt den egentlig ikke, men jeg nød den som et barn Mere om CSS 3: background-origin og background-clip Kategori: CSS —> 1 kommentar Tweets, der nævner Niquelao » Arkiv over webloggen » Mere om CSS 3: background-origin og background-clip — Topsy.com 14. december 2009 […] Dette indlæg blev omtalt på Twitter af Jorge Rumoroso og Juanjo Fernández.

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

Juanjo Fernández sagde: RT @rumoroso: #niquelao Mere om CSS 3: background-origin og background-clip http://bit.ly/5wKoQt #CSS3 […] Du kan følge kommentarerne via RSS 2.0-feedet. Du kan også sende et trackback fra dit eget websted.

Forrige artikel: Fish eye-menu kun med CSS Transform og Transition —> —> —> Dette værk er licenseret under en Creative Commons-licens.

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.