Niquelao » 網誌存檔 » 更多關於 CSS 3：background-origin 與 background

» Arxiu del weblog » Més sobre CSS 3: background-origin i background-clip Niquelao Més sobre CSS 3: background-origin i background-clip 13 de Desembre de 2009, per Rumoroso Continuant amb el repàs a les diferents propietats de CSS 3 que controlaran els nostres fons, ara els toca el torn a background-origin i background-clip . Aquestes dues propietats vénen per ajudar-nos a controlar tant l’origen respecte al qual posicionarem les imatges de fons, com la possibilitat de mostrar-les per sota de la vora. background-origin Determina l’origen a partir d’on es calcula la posició del fons, és a dir, l’origen de coordenades per a la propietat background-position .

Els seus valors possibles són: border-box : la posició del fons es determina respecte a l’àrea que inclou la vora (traduït significa que si la vora és discontínua, el fons es podrà arribar a veure per sota seu). padding-box : és el valor per defecte i determina la posició del fons respecte a l’àrea que inclou el padding (equivalent a l’actual en CSS 2.1). content-box : el fons es posiciona respecte a l’àrea de contingut. background-clip Determina l’àrea en la qual es mostrarà el fons i admet dos valors possibles: border-box : és el valor per defecte i inclou el fons en l’àrea ocupada per la vora. padding-box : limita l’àrea en la qual es mostrarà el fons a l’ocupada pel padding i el contingut, és a dir, encara que l’origen del fons estigui a la vora, no es mostrarà la imatge per sota d’aquesta.

L’explicació Com sempre, el millor és acudir als exemples en forma de captures per explicar ambdues propietats. En ells he simulat l’espai ocupat per un element (respectant el model de caixes), és a dir, vora (puntejada grisa gruixuda), padding (espai entre la vora i la fina línia discontínua) i contingut (delimitat per la línia discontínua). Comencem: Quina és la diferència entre el següent parell d’imatges?

Resulta evident que la diferència entre ambdues està en què en una es mostra el fons per sota de la vora, mentre que en l’altra no. El CSS de la primera és: background-origin: border-box; background-clip: border-box; …i per a la segona: background-origin: border-box; background-clip: padding-box; I ara, entre les següents imatges? Ara la diferència està en l’origen del fons.

En la primera, l’origen inclou la vora: background-origin: border-box; …mentre que en la segona estaria en el padding: background-origin: padding-box; Finalment, quina és la diferència ara? : Novament està clar. La primera imatge, igual que la primera en el parell d’exemples anteriors, té com a origen del fons l’àrea de la vora, mentre que la segona té aquest origen en l’àrea de contingut: background-origin: border-box; i background-origin: content-box; Si el teu navegador és una versió recent de Firefox , Chrome , Safari o Konqueror , pots accedir a la pàgina amb un exemple d’aplicació d’ambdues propietats .

Si utilitzes algun altre (per exemple, Internet Explorer o Opera) també pots accedir a l’exemple, encara que en aquest cas serà per veure el resultat quan no se suporten aquestes propietats. nota: Mozilla i WebKit suporten aquestes propietats de forma experimental amb les seves sintaxis particulars. Com ja vaig explicar en un altre article, amb CSS 3 podrem incloure més d’una imatge de fons . Les propietats background-origin i background-clip admeten la inclusió d’un valor per a cadascuna de les imatges que s’utilitzin.

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

Per acabar, novament comentaré alguna cosa respecte a la imatge emprada de fons en els exemples. És una deliciosa tarta de fruites que va fer la Dolores i que em vaig guanyar per bo… val, que em vaig guanyar a seques… bé, no me la vaig guanyar, però la vaig gaudir com un nen Més sobre CSS 3: background-origin i background-clip Categoria: CSS —> 1 comentari Tweets that mention Niquelao » Archivo del weblog » Más sobre CSS 3: background-origin y background-clip — Topsy.com 14 de Desembre de 2009 […] This post was mentioned on Twitter by Jorge Rumoroso, Juanjo Fernández.

Juanjo Fernández said: RT @rumoroso: #niquelao Más sobre CSS 3: background-origin y background-clip http://bit.ly/5wKoQt #CSS3 […] Pots fer un seguiment dels comentaris gràcies al feed RSS 2.0 . També pots enviar un trackback des del teu lloc. Article anterior: Fish eye menu only with CSS Transform and Transition —> —> —> Aquesta obra està sota una llicència de Creative Commons .

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.