Com afegir un fons a un lloc web: 14 passos (amb imatges)

Taula de continguts:

Com afegir un fons a un lloc web: 14 passos (amb imatges)
Com afegir un fons a un lloc web: 14 passos (amb imatges)

Vídeo: Com afegir un fons a un lloc web: 14 passos (amb imatges)

Vídeo: Com afegir un fons a un lloc web: 14 passos (amb imatges)
Vídeo: Полное руководство по Google Forms - универсальный инструмент для опросов и сбора данных онлайн! 2024, Maig
Anonim

El fons és un dels elements més crucials d’un lloc web. Un bon fons crea el to del lloc web i complementa el contingut. Hi ha moltes maneres diferents d’afegir un fons, cada una amb un propòsit diferent. Alguns mètodes permeten aplicar el fons a totes les pàgines d’un lloc web, mentre que d’altres limiten el fons a una pàgina determinada. Aquest article us ensenya a afegir un fons al vostre lloc web mitjançant HTML o CSS.

Passos

Mètode 1 de 2: Mètodes HTML

Fons de color sòlid

Afegiu un fons a un lloc web Pas 1
Afegiu un fons a un lloc web Pas 1

Pas 1. Un fons de color sòlid és el tipus de fons més bàsic que podeu posar en un lloc web

De fet, cada lloc web comença amb un fons blanc per defecte. Tanmateix, tot i que un fons blanc pot tenir un aspecte molt elegant i net quan s’utilitza amb un esquema de colors harmònic, es pot afavorir un fons de colors diferents amb diferents temes.

Afegiu un fons a un lloc web Pas 2
Afegiu un fons a un lloc web Pas 2

Pas 2. Obriu el codi web (font)

Afegiu un fons a un lloc web Pas 3
Afegiu un fons a un lloc web Pas 3

Pas 3. A l'etiqueta del cos, afegiu un atribut anomenat bgcolor

Ara, l’etiqueta corporal hauria de tenir aquest aspecte:

on COLORNAME és el nom del color. COLORNAME es pot omplir amb molts tipus de representants de colors.

  • (nom del color)
  • (valor hexadecimal)
  • (Valor RGB)
Afegiu un fons a un lloc web Pas 4
Afegiu un fons a un lloc web Pas 4

Pas 4. Experimentar amb RGB i # pot conduir a molts matisos, però podeu prendre el primer camí fàcil

Però recordeu que, si escriviu un color poc comú com a "Verd blavós ultramarí", resultarà el blanc.

Afegir una imatge de fons

Afegir una imatge de fons és una mica més complicat que un fons de color sòlid

Afegiu un fons a un lloc web Pas 5
Afegiu un fons a un lloc web Pas 5

Pas 1. Afegiu la propietat de fons a l'etiqueta del cos, de manera que sembli així-

on SRC és la font de la imatge SRC pot estar a la mateixa carpeta o en una altra carpeta / pàgina web.

  • (a la mateixa carpeta)
  • (dins d'una carpeta diferent)
  • (en una pàgina web diferent)
Afegiu un fons a un lloc web Pas 6
Afegiu un fons a un lloc web Pas 6

Pas 2. Recordeu escriure l'extensió.gif /-j.webp" />

Mètode 2 de 2: Mètodes CSS

Afegiu un fons a un lloc web Pas 6
Afegiu un fons a un lloc web Pas 6

Fons de color sòlid

Afegiu un fons a un lloc web Pas 7
Afegiu un fons a un lloc web Pas 7

Pas 1. Per afegir un fons de color sòlid a CSS, afegiu un atribut d'estil

També podeu proporcionar identificadors i classes i utilitzar fulls d’estil interns i externs.

Afegiu un fons a un lloc web Pas 8
Afegiu un fons a un lloc web Pas 8

Pas 2. La vostra etiqueta corporal hauria de ser així:

on COLORNAME és el nom del color, valor hexadecimal o RGB (recordeu també els darrers passos del fons de color sòlid en HTML, també són aplicables aquí).

Afegir una imatge

Afegiu un fons a un lloc web Pas 9
Afegiu un fons a un lloc web Pas 9

Pas 1. Per afegir una imatge, afegiu l'atribut style a l'etiqueta del cos

També podeu proporcionar identificadors i classes i utilitzar fulls d’estil interns i externs.

Afegiu un fons a un lloc web Pas 10
Afegiu un fons a un lloc web Pas 10

Pas 2. Ara l'etiqueta corporal hauria de tenir aquest aspecte:

Afegir un fons a un lloc web Pas 11
Afegir un fons a un lloc web Pas 11

Pas 3. Recordeu que SRC és la font

Pot ser de la mateixa carpeta, carpeta diferent o una pàgina web diferent.

  • (a la mateixa carpeta)
  • (dins d'una carpeta diferent)
  • (en una pàgina web diferent).
Afegiu un fons a un lloc web Pas 12
Afegiu un fons a un lloc web Pas 12

Pas 4. Recordeu que també heu d'afegir les extensions

Fons repetit amb patrons

Afegir un fons a un lloc web Pas 13
Afegir un fons a un lloc web Pas 13

Pas 1. Per fer un fons de patró repetit, afegiu un fons tal com s'ha dit als passos anteriors

Ara s’ha de canviar l’etiqueta del cos a

On són els paràmetres REPEAT-SETTINGS. Hi pot haver moltes opcions de repetició, com ara

  • (El fons es repetirà verticalment i horitzontalment.)
  • (El fons es repetirà horitzontalment.)
  • (El fons es repetirà verticalment.)

Fons d'imatge fixa

Afegir un fons a un lloc web Pas 14
Afegir un fons a un lloc web Pas 14

Pas 1. Els fons de les imatges fixes semblen genials i no canvien a mesura que es desplaça cap avall

Per fer-los només heu de fer alguns ajustaments senzills al codi de la secció anterior. Feu els ajustaments perquè l’etiqueta corporal tingui aquest aspecte-

on SRC és la font de la imatge de fons, POSITION és la posició de la imatge (pot anar des del centre fins a la part superior dreta); background-attachment és el principal "catalitzador" d'aquest tipus de fons. S'utilitza per indicar la posició del fons i es recomana que no es canviï.

Recomanat: