Niquelao » Archivio del weblog » Di più su CSS 3: background-origin e background

» Archivio del weblog » Di più su CSS 3: background-origin e background-clip Niquelao Di più su CSS 3: background-origin e background-clip 13 dicembre 2009, di Rumoroso Continuando con la rassegna delle diverse proprietà di CSS 3 che controlleranno i nostri sfondi, ora tocca a background-origin e background-clip . Queste due proprietà servono ad aiutarci a controllare sia l’origine rispetto alla quale posizioneremo le immagini di sfondo, sia la possibilità di mostrarle al di sotto del bordo. background-origin Determina l’origine a partire dalla quale si calcola la posizione dello sfondo, ovvero l’origine delle coordinate per la proprietà background-position .

I suoi possibili valori sono: border-box : la posizione dello sfondo viene determinata rispetto all’area che include il bordo (tradotto significa che se il bordo è discontinuo, lo sfondo potrà arrivare a vedersi al di sotto di esso). padding-box : è il valore predefinito e determina la posizione dello sfondo rispetto all’area che include il padding (equivalente a quella attuale in CSS 2.1). content-box : lo sfondo viene posizionato rispetto all’area del contenuto. background-clip Determina l’area in cui verrà mostrato lo sfondo e ammette due possibili valori: border-box : è il valore predefinito e include lo sfondo nell’area occupata dal bordo. padding-box : limita l’area in cui verrà mostrato lo sfondo a quella occupata dal padding e dal contenuto, cioè, anche se l’origine dello sfondo è sul bordo, l’immagine non verrà mostrata al di sotto di esso.

La spiegazione Come sempre, la cosa migliore è ricorrere agli esempi sotto forma di schermate per spiegare entrambe le proprietà. In essi ho simulato lo spazio occupato da un elemento (rispettando il modello a scatole), cioè bordo (punteggiato grigio spesso), padding (spazio tra il bordo e la sottile linea discontinua) e contenuto (delimitato dalla linea discontinua). Iniziamo: Qual è la differenza tra la seguente coppia di immagini?

Risulta evidente che la differenza tra le due sta nel fatto che in una lo sfondo viene mostrato al di sotto del bordo, mentre nell’altra no. Il CSS della prima è: background-origin: border-box; background-clip: border-box; …e per la seconda: background-origin: border-box; background-clip: padding-box; E ora, tra le seguenti immagini? Ora la differenza sta nell’origine dello sfondo.

Nella prima, l’origine include il bordo: background-origin: border-box; …mentre nella seconda sarebbe nel padding: background-origin: padding-box; Infine, qual è la differenza ora? : Ancora una volta è chiaro. La prima immagine, come la prima nella coppia di esempi precedenti, ha come origine dello sfondo l’area del bordo, mentre la seconda ha tale origine nell’area del contenuto: background-origin: border-box; e background-origin: content-box; Se il tuo browser è una versione recente di Firefox , Chrome , Safari o Konqueror , puoi accedere alla pagina con un esempio di applicazione di entrambe le proprietà .

Se utilizzi qualche altro browser (ad esempio, Internet Explorer o Opera) puoi comunque accedere all’esempio, anche se in questo caso sarà per vedere il risultato quando queste proprietà non sono supportate. nota: Mozilla e WebKit supportano queste proprietà in modo sperimentale con le loro sintassi particolari. Come ho già spiegato in un altro articolo, con CSS 3 potremo includere più di un’immagine di sfondo . Le proprietà background-origin e background-clip ammettono l’inclusione di un valore per ciascuna delle immagini utilizzate.

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

Per concludere, commenterò ancora una volta qualcosa riguardo all’immagine usata come sfondo negli esempi. È una deliziosa torta di frutta che ha fatto Dolores e che mi sono guadagnato per merito… va bene, che mi sono guadagnato e basta… beh, non me la sono guadagnata, ma me la sono goduta come un bambino Di più su CSS 3: background-origin e background-clip Categoria: CSS —> 1 commento Tweets that mention Niquelao » Archivio del weblog » Di più su CSS 3: background-origin e background-clip — Topsy.com 14 dicembre 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 […] Puoi seguire i commenti grazie al feed RSS 2.0 . Puoi anche inviare un trackback dal tuo sito. Articolo precedente: Fish eye menu only with CSS Transform and Transition —> —> —> Quest’opera è distribuita con licenza 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.