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

» Arkiv för webloggen » Mer om CSS 3: background-origin och background-clip Niquelao Mer om CSS 3: background-origin och background-clip 13 december 2009, av Rumoroso Vi fortsätter vår genomgång av de olika egenskaperna i CSS 3 som styr bakgrunder. Nu är det dags för background-origin och background-clip.

Dessa två egenskaper hjälper oss att styra både ursprunget för hur vi positionerar bakgrundsbilder och möjligheten att visa dem under kanten. background-origin Bestämmer ursprunget från vilket bakgrundens position beräknas, det vill säga koordinatursprunget för egenskapen background-position. De möjliga värdena är: border-box: Bakgrundens position bestäms relativt området som inkluderar kanten (översatt betyder det att om kanten är streckad kan bakgrunden synas under den). padding-box: Detta är standardvärdet och bestämmer bakgrundens position relativt området som inkluderar utfyllnaden (motsvarar det nuvarande beteendet i CSS 2.1). content-box: Bakgrunden positioneras relativt innehållsområdet. background-clip Bestämmer det område där bakgrunden ska visas och accepterar två möjliga värden: border-box: Detta är standardvärdet och inkluderar bakgrunden i området som upptas av kanten. padding-box: Begränsar området där bakgrunden visas till det som upptas av utfyllnaden och innehållet.

Det innebär att även om bakgrundens ursprung ligger vid kanten, kommer bilden inte att visas under denna. Förklaringen Som alltid är det bäst att använda exempel i form av skärmdumpar för att förklara båda egenskaperna. I dessa har jag simulerat utrymmet som ett element upptar (med respekt för boxmodellen), det vill säga kant (tjock grå streckad linje), utfyllnad (utrymme mellan kanten och den tunna streckade linjen) och innehåll (avgränsat av den streckade linjen).

Vi börjar: Vad är skillnaden mellan följande bildpar? Det är uppenbart att skillnaden mellan dem är att bakgrunden visas under kanten i den ena, men inte i den andra. CSS-koden för den första är: background-origin: border-box; background-clip: border-box; …och för den andra: background-origin: border-box; background-clip: padding-box; Och nu, vad är skillnaden mellan följande bilder?

Här ligger skillnaden i bakgrundens ursprung. I den första inkluderar ursprunget kanten: background-origin: border-box; …medan det i den andra ligger vid utfyllnaden: background-origin: padding-box; Slutligen, vad är skillnaden nu? Återigen är det tydligt.

Den första bilden har, precis som den första i det tidigare exempelparet, bakgrundens ursprung i kantområdet, medan den andra har sitt ursprung i innehållsområdet: background-origin: border-box; respektive background-origin: content-box; Om din webbläsare är en nyare version av Firefox, Chrome, Safari eller Konqueror kan du besöka sidan med ett exempel på användning av båda egenskaperna. Om du använder någon annan (till exempel Internet Explorer eller Opera) kan du också komma åt exemplet, men då för att se resultatet när dessa egenskaper inte stöds.

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

Notera: Mozilla och WebKit stöder dessa egenskaper experimentellt med sina specifika syntaxer. Som jag redan förklarade i en annan artikel kommer CSS 3 att låta oss inkludera mer än en bakgrundsbild.

Egenskaperna background-origin och background-clip tillåter att ett värde anges för var och en av de bilder som används. Till slut vill jag återigen kommentera något om bakgrundsbilden som används i exemplen. Det är en läcker frukttarta som Dolores gjorde och som jag vann för att jag var snäll… okej, jag vann den helt enkelt… nej egentligen vann jag den inte, men jag njöt av den som ett barn. Mer om CSS 3: background-origin och background-clip Kategori: CSS —> 1 kommentar Tweets som nämner Niquelao » Arkiv för webloggen » Mer om CSS 3: background-origin och background-clip — Topsy.com 14 december 2009 […] Detta inlägg omnämndes på Twitter av Jorge Rumoroso och Juanjo Fernández.

Juanjo Fernández sade: RT @rumoroso: #niquelao Mer om CSS 3: background-origin och background-clip http://bit.ly/5wKoQt #CSS3 […] Du kan följa kommentarerna via RSS 2.0-flödet. Du kan också skicka en trackback från din webbplats. Föregående artikel: Fish eye-menu enbart med CSS Transform och Transition —> —> —> 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.