MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

This translation is incomplete. Please help translate this article from English.

En CSS podeu fer molt per dissenyar el fons del vostre contingut. Ja hem vist alguns usos senzills, com ara colors de fons bàsics i imatges; En aquest article, explicarem tota la història i veurem algunes característiques avançades, com ara diverses imatges de fons i gradients de color.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), , i una idea de com funciona CSS (estudi Introducció a CSS.)
Objectiu: Aprendre sobre com aplicar estils als elements de fons detalladament

Què és exactament un fons?

De manera predeterminada aquest és el cas malgrat tot: en els navegadors més recents podeu alterar l'àrea que ocupa el fons, utilitzant la propietat background-clip (vegeu la  cobertura de background-clip de l'article model de caixa CSS per més detalls).

El fons no se situa per sota del marge - el marge no compte com a part de l'àrea de l'element, sinó de l'àrea fora de l'element.

Hi ha moltes altres propietats diferents que podeu utilitzar per manipular el fons de l'element, algunes de les quals ja hem vist diverses vegades al nostre curs:

  • background-color: Estableix un color sòlid per al fons.
  • background-image: Especifica una imatge de fons que apareixerà al fons de l'element. Això pot ser un fitxer estàtic o un degradat generat.
  • background-position: Especifica la posició en què el fons hauria d'aparèixer dins del fons de l'element.
  • background-repeat: Especifica si el fons s'ha de repetir (en mosaic) o no.
  • background-attachment: Especifica el comportament del fons d'un element quan el seu contingut es desplaça, ex. es fa el desplaçament amb el contingut, o es fixa ?
  • background: Especificació abreujada de les cinc propietats anteriors en una línia.
  • background-size: Permet canviar la mida d'una imatge de fons dinàmicament.

Nota: La majoria d'aquestes característiques tenen un bon suport per al navegador, excepte les dues últimes, des d'on el suport és una mica més limitat (Internet Explorer 9+, Safari 7+, Android 4.4+) i gradients de fons (Internet Explorer 9+).

Al llarg de la resta de l'article, veurem com utilitzar aquestes característiques en detall.

Conceptes bàsics: color, imatge, posició, repetició

Explorarem un exemple senzill per mostrar com funcionen les quatre propietats més bàsiques - utilitzareu aquestes tot el temps quan es tracti de fons.

Color de fons

Molt sovint utilitzareu la propietat background-color:

  • Per començar, el color de fons per defecte de la majoria dels elements no és blanc ( white) (com es pot esperar), sinó transparent — per tant, si establiu el color de fons d'un element en algo interessant, però voleu que els seus elements fills siguin de color blanc, haureu de configurar-ho explícitament.
  • A més, és important establir un color de fons com a alternativa. Els colors de fons s'admeten pràcticament a tot arreu, mentre que les característiques més exòtiques, com ara els gradients de fons, només s'admeten en els navegadors més nous, a més, una imatge de fons podria fallar en carregar-se per alguna raó. Per tant, és una bona idea establir un color de fons bàsic, així com especificar aquestes característiques, de manera que el contingut de l'element es pogui llegir sense importar el que sigui.

Comencem creant un exemple. Començarem amb un senzill HTML:

<p>Exciting box!</p>

Anem a donar-li un color de fons:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
}

El resultat és el següent:

Imatge de fons

La propietat background-image especifica una imatge de fons per mostrar en el fons d'un element. L'ús més senzill d'aquesta propietat implica utilitzar la funció url() que porta la ruta d'accés a una imatge com a paràmetre per obtenir un fitxer d'imatge estàtic per inserir. Anem a afegir una imatge de fons a l'exemple anterior:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
}

El resultat és el següent:

Això no es veu molt bé en aquests moments - les imatges es repeteixen horitzontalment i verticalment per defecte. Podem solucionar-ho utilitzant background-repeat, que veurem a continuació.

Nota: Quasi qualsevol format d'imatge que suporti imatges HTML també és compatible amb imatges de fons CSS, incloses SVG.

Una cosa important a tenir en compte és que, atès que les imatges de fons s'estableixen amb CSS i apareixen en el fons del contingut, seran invisibles a les tecnologies d'assistència com a lectors de pantalla. No són imatges de contingut, són només per a decoració. Si voleu incloure una imatge a la vostra pàgina que formi part del contingut, heu de fer-ho amb un element <img>.

Repetició de fons

background-repeat us permet especificar com es repeteix la imatge de fons. El valor per defecte és repeat que com heu vist anteriorment, fa que la imatge continuï repetint fins que tot el fons de l'element s'ompli. Això no és el que volem en aquest cas (encara que en alguns casos, per ex., repeating-background.html). Altres valors comuns i àmpliament admessos són:

  • no-repeat: La imatge no es repetirà: només es mostrarà una vegada.
  • repeat-x: La imatge es repeteix horitzontalment en tot el fons.
  • repeat-y: La imatge es repeteix verticalment en tot el fons.

Anem a arreglar l'exemple:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
}

El resultat és el següent:

Això certament és millor, però el posicionament de la imatge està desactivat - actualment se solapa el text. Hem de posicionar-ho en un lloc millor.

Posició de fons

background-position ens permet situar la nostra imatge de fons allà on vulguem dins del fons. En general, la propietat adoptarà dos valors, separats per un espai, que especifiquen les coordenades horitzontals (x) i verticals (y) de la imatge - a la cantonada superior esquerra de la imatge, per ser exactes. Penseu en el fons com un gràfic, amb la coordenada x que passa d'esquerra a dreta, i la coordenada y que passa de dalt a baix.

La propietat pot acceptar molts tipus de valor diferents; Els més comuns que utilitzareu són:

  • Valors absoluts com píxels - per exemple background-position: 200px 25px.
  • Valors relatius com a rems - per exemple background-position: 20rem 2.5rem.
  • Percentatges - per exemple background-position: 90% 25%.
  • Paraules clau - per exemple background-position: right center. Aquests dos valors són intuïtius i poden prendre valors left, center, right i top, center, bottom, respectivament.

Heu de tenir en compte que podeu barrejar i combinar aquests valors, per exemple background-position: 99% center. Tingueu en compte també que, si només especifiqueu un valor, se suposa que el valor serà el valor horitzontal i el valor vertical es farà servir per defecte center.

Anem a arreglar l'exemple:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png);
  background-repeat: no-repeat;
  background-position: 99% center;
}

El resultat és el següent:

Imatge de fons: gradients

Hi ha un altre conjunt de valors disponibles per a background-image - gradients de color, que són suaus transicions de color a través d'un fons. Els gradients generats dinàmicament es van introduir com a característica fa un temps, ja que l'ús de gradients en el disseny web era tan popular, però l'aplicació de gradients amb imatges de fons és bastant inflexible. Hi ha dos tipus de gradients disponibles en aquest moment - gradients lineals (que van des d'una línia recta a un altre) i gradients radials (que irradien des d'un únic punt).

En aquest article només ens centrarem en el primer tipus. El segon és una mica més complex i menys utilitzat. Podeu trobar més informació sobre tots dos als enllaços al final de l'article.

Un gradient lineal es crea passant en una funció linear-gradient() com a valor d'una propietat background-image. Com a mínim, la funció necessita prendre tres paràmetres separats per comes: l'adreça en la qual el degradat ha d'entrar en el fons, el color al inici i el color al final. Per exemple:

background-image: linear-gradient(to bottom, orange, yellow);

Aquest gradient s'executaria de dalt a baix, començant com a taronja a la part superior, i fent una transició suau al groc a la part inferior. Podeu utilitzar paraules clau per especificar la direcció (to bottom, to right, to bottom right, etc.), o a valors de grau (0deg és equivalent a la part superior, 90deg és equivalent a la dreta (right), fins 360deg, que equival a la part superior (top) de nou ).

També podeu especificar altres punts al llarg del degradat on es defineix el color - es denominen parades de color (color stops), i el navegador calcularà els gradients de color entre cada conjunt de parades de color. Així per exemple:

background-image: linear-gradient(to bottom, yellow, orange 40%, yellow);

Aquest gradient s'executaria de dalt a baix, començant en groc, arrivant a un gradient de taronja al 40% de camí cap avall de l'element i tornant a groc al 100%. Podeu especificar tantes parades de color com vulgueu, i també podeu especificar la posició d'aquestes parades utilitzant altres unitats, com ara rems, px, etc.

Afegim un gradient lineal al nostre exemple:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
  background-repeat: no-repeat;
  background-position: 99% center;
}

El resultat és el següent:

Tingueu en compte que també podeu establir un gradient lineal de repetició mitjançant la funció repeating-linear-gradient(). Això funciona exactament de la mateixa manera, tret que el patró configurat es repeteix una i altra vegada fins a la vora del fons. Per exemple:

background-image: repeating-linear-gradient(to right, yellow, orange 25px, yellow 50px);

Això crearia un gradient que aniria de groc a taronja i de nou cada 50 píxels al llarg del gradient.

Adjunt de fons

Una altra opció que tenim disponible per a fons és especificar com es desplaça quan el contingut es desplaça. Això es controla mitjançant la propietat background-attachment, que pot prendre els següents valors:

  • scroll: Això fixa el fons a la pàgina de la finestra, de manera que es desplaçarà a mesura que la pàgina es desplaci. Tingueu en compte que hem dit finestra, no element - si es desplaça l'element real en el qual s'estableix el fons, no la pàgina, el fons no es desplaçarà.
  • fixed: Això fixa el fons en posició a la pàgina, de manera que no es desplaça a mesura que es desplaça la pàgina - es mantindrà exactament en la mateixa posició, tant si es desplaça la pàgina o l'element sobre el qual s'estableix el fons.
  • local: Aquest valor es va afegir més endavant (només hi ha suport a Internet Explorer 9+, mentre que els altres són compatibles amb IE4 +) perquè el valor de desplaçament és bastant confús i en realitat no fa el que es vol en molts casos. El valor local fixa el fons de l'element en el qual es troba, de manera que, quan es desplaça l'element, el fons es desplaça amb ell.

La propietat background-attachment només té un efecte quan hi ha contingut per desplaçar-se, de manera que hem realitzat una demostració per demostrar les diferències entre els tres valors - vegeu background-attachment.html (Vegeu també el codi font aquí).

Fons abreujat

És possible declarar tots els valors de propietat descrits anteriorment (i alguns altres, en navegadors més nous) en una sola línia, utilitzant la propietat background. Per fer-ho, utilitzeu els mateixos valors que el de les propietats individuals, però els heu de posar tots en una línia separada per espais, com aixó:

background: yellow linear-gradient(to bottom, orange, yellow) no-repeat left center scroll;

Qualsevol propietat no especificada en l'abreviatura s'assignarà a les propietats predeterminades. Podeu consultar la pàgina de referència background per esbrinar quins són els valors predeterminats i quines altres propietats es poden incloure a l'abreviatura de fons (background).

Tornem al nostre exemple de caixa emocionant, i reemplacem les propietats existents en abreviatura. Podem reemplaçar totes aquestes propietats:

background-color: yellow;
background-image: linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-repeat: no-repeat;
background-position: 99% center;

Amb aquest:

background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;

El codi final sembla així:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background: yellow linear-gradient(to bottom, yellow, #dddd00 50%, orange) no-repeat 99% center;
}

El resultat és el següent:

Múltiples fons

Recentment (des d'Internet Explorer 9) hem tingut la possibilitat d'adjuntar múltiples fons a un sol element. Això és bo, ja que múltiples fons són molt útils. Separeu les diferents definicions de fons amb comes:

background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;              

I els fons s'apilen un damunt de l'altre amb el primer apareixent en la part superior, després el segon sota ell, després el tercer, etc. Això possiblement es el que no esperàveu, així que tingueu cura. Tingueu en compte, també, que hem posat el color de fons de retorn en una declaració de propietat separada, ja que intentar incloure-ho en els fons múltiples sembla trencar les coses.

També podeu posar valors múltiples en propietats de fons (background-*) sense abreuja, per exemple:

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

Encara que probablement es millor utilitzar l'abreviatura de fons - no només és més ràpid d'escriure, és més fàcil veure quines propietats de fons s'apliquen a quin fons.

Davant la disponibilitat de fons múltiples, els desenvolupadors web van haver de posar diversos elements <div> al voltant de les seves caixes i després aplicar una imatge de fons independent a cadascuna:

<div class="background1">
  <div class="background2">
    <div class="background3">
      <p>My content</p>
    </div>
  </div>
</div>

Això va funcionar, però va resultar un marcat bastant complicat i difícil de llegir. És possible que hàgiu de fer això si necessiteu suportar versions anteriors d'Internet Explorer.

Posem múltiples fons al nostre exemple de caixa emocionant: volem veure el gradient i la bola de foc, tots dos alhora:

p {
  font-family: sans-serif;
  padding: 20px;
  /* background properties */
  background-color: yellow;
  background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

Això ens dóna el següent resultat:

Note: You can find the completed example on Github (see the source code too).

Mida de fons

Com hem esmentat anteriorment, hi ha una propietat disponible: background-size - que us permet alterar dinàmicament la mida d'una imatge de fons per tal que s'adapti millor al vostre disseny. Això és molt útil de moltes maneres, per exemple, corregir automàticament la mida de les icones que no es carreguen correctament. Només cal tenir en compte que no és compatible amb versions d'Internet Explorer inferiors a 9, de manera que no podeu confiar-hi si necessiteu compatibilitat amb navegadors antics. Per a cada imatge de fons, cal incloure dos valors de mida de fons - una per a la dimensió horitzontal i una per a la vertical:

background-image: url(myimage.png);
background-size: 16px 16px;

Podeu utilitzar totes les unitats de longitud que esperaríeu, per poder especificar els valors que voleu: px, percentatges, rems, etc.

Podeu veure un bon exemple de background-size en ús a Incloure icones en enllaços.

Aprenentatge actiu: Jugar amb fons

Aquesta sessió d'aprenentatge actiu tampoc no té respostes correctes - aquí volem que juguis amb els fons i et diverteixis abans de seguir endavant. Podries:

  • Establiu un color de fons diferent.
  • Incloeu una imatge de fons diferent - trobeu una ruta d'accés absoluta a una imatge que utilitzareu dins de la funció url().
  • Apliqueu un degradat de fons.
  • Apliqueu múltiples fons.
  • Incloeu una propietat background-size per canviar la mida de les imatges de fons.

Si seguiu això com a part d'una classe o grup d'estudi, el vostre professor o mentor també podria establir algunes tasques addicionals per completar.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset.

Resum

Aquest article us hauria d'haver ensenyat la major part del que sempre hauríeu de conèixer sobre els elements d'estil dels fons. Tant de bo us hàgiu divertit al llarg del camí!. En el següent article jugarem amb vores i veurem com fer-ne l'estil.

Vegeu també

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,