Niquelao » 網誌存檔 » 使用 CSS 3 的多重背景圖片

Fins ara, si volíem combinar més d’una imatge com a fons, l’únic que podíem fer era utilitzar algun dels elements que teníem a la nostra pàgina, aplicant un fons a cadascun per obtenir el resultat desitjat. Fins i tot de vegades, utilitzàvem marcatge extra, disminuint la qualitat del web en afegir marcatge amb finalitats únicament presentacionals.

Però ara la cosa canvia… Gràcies a CSS 3, si volem utilitzar dues o més imatges de fons, a la propietat background-image: li podrem afegir la ruta de cadascuna d’elles separant-les amb comes. Per exemple: background-image: url(‘fondo1.png’), url(‘fondo2.png’) Amb una cosa tan senzilla com això tenim declarat el necessari perquè l’element sobre el qual ho apliquem tingui les dues imatges com a fons. És clar, a partir d’aquest punt sorgeixen nous dubtes… es superposen entre elles? es poden posicionar en llocs diferents? es pot repetir una sobre un eix i evitar que l’altra ho faci? … …i totes tenen com a resposta SÍ .

Respecte a la superposició, la primera imatge que es declara és la que es col·loca més propera a l’usuari . A continuació i per darrere d’aquesta, es col·loca la següent (en un eix perpendicular a la pantalla), després la següent, i així successivament fins a l’última, que serà la que se situï darrere de totes. És com si cada imatge se situés en una capa . Si a més declarem un color de fons, aquest es posarà per darrere de totes les imatges emprades.

Pel que fa a la resta de dubtes, puc generalitzar una resposta, ja que tots han sorgit en pensar en les propietats que habitualment utilitzem, és a dir, posició de la imatge de fons ( background-position ), comportament a l’scroll ( background-attachment ) i repetició ( background-repeat ). Si volem que cada imatge tingui un valor determinat, únicament haurem de declarar-los consecutivament i separats per comes (igual que vam fer en declarar les pròpies imatges). Per exemple: background-image: url(‘fondo1.png’), url(‘fondo2.png’), url(‘fondo3.png’); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; Amb això declarem tres imatges com a fons, la primera se situarà a dalt a l’esquerra, la segona es desplaçarà cap a la dreta 150px i cap avall 200px i la tercera es col·locarà també a l’esquerra i centrada verticalment.

Respecte a la repetició, la primera i l’última no es repetiran i la segona ho farà sobre l’eix horitzontal. Però aquí no s’acaba el tema. Per als que ens agrada optimitzar el codi (que hauríem de ser tots), algunes declaracions es poden abreujar: background-position: 0 0, 150px 200px, left center; passa a: background-position: 0 0, 150px 200px, left; S’elimina la paraula center .

Com tots sabem (o hauríem de saber), quan no es declara un dels valors de posició del fons, el que pren per defecte és el de centrat ( center ), en aquest cas vertical. background-repeat: no-repeat, repeat-x, no-repeat; passa a: background-repeat: no-repeat, repeat-x; El tercer valor es pot eliminar. La raó és que quan falten valors, es repeteix la llista dels valors ja declarats fins a tenir-ne un per imatge (d’aquí que si comença la relació de valors de nou, el primer sigui no-repeat ). Però encara es pot optimitzar més, aprofitant la propietat shorthand background: : background: url(‘fondo1.png’) 0 0 no-repeat, url(‘fondo2.png’) 150px 200px repeat-x, url(‘fondo3.png’) left no-repeat; Com veureu, tot això obre el ventall de possibilitats als nostres dissenys.

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

Alguns navegadors, en les seves versions actuals, comencen a tenir suport per a múltiples imatges de fons. Entre ells hi ha Firefox (a partir de la versió 3.6), Chrome , Safari i Konqueror .

Si esteu utilitzant un d’ells, podeu veure el resultat a l’exemple que he preparat . Lamentant-ho molt, encara no hi ha suport a Internet Explorer (ja es veurà si ho inclouen en la seva futura versió 9) ni a Opera. A continuació us incloc una captura de pantalla amb el que es mostra a l’exemple quan hi ha suport (si hi accediu amb un navegador sense suport, únicament veureu la vora puntejada): A part del comentat, CSS 3 també inclou nous valors per a algunes de les propietats esmentades, a més de noves propietats que donaran gran versatilitat als nostres dissenys.

En un proper article les tractaré en detall. Per anar obrint boca us menciono background-size … sí, és el que esteu pensant! nota: Suposo que a part del contingut tècnic de l’article, el més apetitós és el pastís de la foto . Doncs per fer-vos una mica d’enveja us diré que la foto la vaig fer jo i és un pastís de fruites que em va preparar la Dolores… És evident que ella també domina el tema de controlar la presentació, però a més us garanteixo que domina la gestió de continguts, perquè estava deliciós… Múltiples imatges de fons amb CSS 3 Categoria: CSS —> 4 comentaris Múltiples imatges de fons amb CSS 3 26 de Novembre de 2009 […] ara la cosa canvia… Múltiples imatges de fons amb CSS 3 […] Tweets that mention Niquelao » Archivo del weblog » Multiples imágenes de fondo con CSS3 — Topsy.com 27 de Novembre de 2009 […] This post was mentioned on Twitter by Jorge Rumoroso, Juanjo Fernández.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Juanjo Fernández said: RT @rumoroso: #niquelao Multiples imágenes de fondo con CSS 3 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » Arxiu del weblog » CSS 3: Propietats de fons 2 de Desembre de 2009 […] suport en les versions més actuals dels navegadors (com ja vaig esmentar a l’entrada titulada Múltiples imatges de fons amb CSS 3), incloent-se en alguns casos de forma experimental (per exemple a Firefox mitjançant el prefix […] Niquelao » Arxiu del weblog » Més sobre CSS 3: background-origin i background-clip 13 de Desembre de 2009 […] 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 cada […] Pots fer un seguiment dels comentaris gràcies al feed RSS 2.0 . També pots enviar un trackback des del teu lloc.

Article anterior: Un altre toc d’estil al Curs de CSS Article següent: CSS 3: Propietats de fons —> —> —> 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.