Ajusteu el color de fons en HTML

Autora: Judy Howell
Data De La Creació: 5 Juliol 2021
Data D’Actualització: 1 Juliol 2024
Anonim
como poner color de fondo en HTML (visual estudio code)
Vídeo: como poner color de fondo en HTML (visual estudio code)

Content

Per poder configurar el fons d’una pàgina web en HTML, només heu de fer un petit canvi a l’element "cos" dins de estil> / estil> etiquetes. Els passos depenen de com vulgueu que es vegi el fons de pantalla. Obteniu informació sobre com definir el fons del vostre lloc web com a animació de color, imatge, degradat o color sòlid.

Per trepitjar

Mètode 1 de 4: definir un color de fons sòlid

  1. Obriu el fitxer HTML al vostre editor de text preferit. A partir d'HTML5, l'atribut HTML bgcolor> ja no és compatible. El color de fons, com tots els altres aspectes d’estil de la pàgina, s’ha d’establir amb CSS.
  2. Afegiu el fitxer estil> / estil> etiqueta el document. Totes les dades d'estil de la pàgina (inclòs el color de fons) s'han de codificar dins d'aquestes etiquetes. Tens el estil> etiquetes ja indicades, llavors podeu desplaçar-vos fins a aquesta part del fitxer.

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. Escriviu l 'element "cos" dins del fitxer estil> / estil> etiquetes. Tot el que canvieu a l'element "cos" a CSS afectarà tota la pàgina.

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

  4. Afegiu la propietat "background-color" a l'element "body". En aquest context, només funcionarà una ortografia de "color" (no: color).

    ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

  5. Col·loqueu el color de fons desitjat darrere de "color de fons". Ara podeu indicar el nom d’un color (verd, blau, ed, etc.), utilitzeu codis hexadecimals (hexadecimals) (per exemple, #000000 per al negre, # ff0000 per al vermell, etc.) o escrivint el valor RGB per al color (com ara rgb (255.255,0) per a groc). A continuació es mostra un exemple amb codis hexadeximals, que fan que el fons sigui el mateix que el bàner wikiHow:

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

    • Blanc: #FFFFFF
    • Rosa clar: # FFCCE6
    • Siena cremada: #993300
    • Índigo: # 4B0082
    • Violeta - # EE82EE
    • Mireu el selector de colors HTML de w3schools.com per trobar els codis hexadecimals de qualsevol color que vulgueu.
  6. Utilitzeu "color de fons" per aplicar colors de fons a altres elements. Igual que definiu l'element del cos, podeu utilitzar el color de fons per definir els fons d'altres elements. Simplement col·loqueu aquests elements dins del fitxer estil> / estil> amb la propietat de color de fons.

    ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {color de fons: taronja; } p {color de fons: rgb (255,0,0); } / style> / head> body> h1> Aquesta capçalera té un fons taronja / h1> p> Aquest paràgraf té un fons vermell / p> / body> / html>

Mètode 2 de 4: utilitzar una imatge com a fons

  1. Obriu el fitxer HTML en un editor de text. Molta gent prefereix utilitzar una imatge com a fons per al seu lloc web. Amb això, podeu establir un patró, textura, foto o qualsevol altra imatge com a fons. Des de HTML5, tots els fons s'han de configurar amb CSS (Fulls d'estil en cascada) dins del fitxer estil> / estil> etiquetes.
  2. Afegiu el fitxer estil> / estil> etiquetes al fitxer HTML. Totes les dades d’estil de la pàgina (inclòs el color de fons) s’han d’indicar dins d’aquestes etiquetes. Ja ho tens estil> etiquetes establertes, desplaceu-vos fins a aquesta part del fitxer.

    ! DOCTYPE html> html> head> style> / style> / head> / html>

  3. Escriviu l 'element "cos" dins del fitxer estil> / estil> etiquetes. Tot el que canvieu a l'element "cos" a CSS afectarà tota la pàgina.

    ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

  4. Afegiu la propietat "background-image" a l'element "body". En afegir aquesta propietat, necessitareu el nom del fitxer de la vostra imatge. Assegureu-vos que la imatge es desi a la mateixa carpeta que el fitxer html (o afegiu el camí complet al fitxer al servidor web).

    ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); color de fons: # 93B874; } / style> / head> body> / body> / html>

    • És una bona idea incloure el codi color de fons per si de cas no es carregaria la imatge de fons.
  5. Capa diverses imatges. Podeu apilar diverses imatges les unes sobre les altres. Això pot ser útil si teniu imatges amb fons transparents que es complementen quan es superposen.

    ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); color de fons: # 93B874; } / style> / head> body> / body> / html>

    • La primera imatge és a la part superior. La segona imatge es troba a sota de la primera.

Mètode 3 de 4: creeu un fons de degradat

  1. Utilitzeu CSS per crear un fons de degradat. Si busqueu una mica més estilitzat que un color sòlid, però no tan ocupat com una animació en color, proveu un fons degradat. Els degradats són colors que canvien a altres igualtats. Podeu utilitzar CSS per crear i ajustar el vostre degradat. Abans de començar a crear un degradat de color, heu d’adquirir prou coneixement dels conceptes bàsics sobre el format d’una pàgina web amb CSS.
  2. Comprendre la sintaxi estàndard. Quan creeu un degradat, hi ha dues informacions que necessitareu: el punt inicial i l’angle inicial i els colors entre els quals es produirà la transició. Podeu seleccionar diversos colors que se superposin i especificar una direcció o un angle per al degradat.

    fons: gradient lineal (direcció / angle, color1, color2, color3, etc.);

  3. Creeu un degradat vertical. Si no indiqueu cap direcció, el color anirà de dalt a baix. Els diferents navegadors tenen versions diferents de la funció de degradat, de manera que haureu d’afegir diferents versions del codi.

    ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Això és necessari per assegurar-se que el degradat abasta tota la pàgina * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: gradient lineal (# 93B874, # C9DCB9); / * Sintaxi per defecte (ha de ser l'última) * / background-color: # 93B874; / * És una bona idea establir un color de fons, en cas que el degradat no es carregui * /} / style> / head> body> / body> / html>

  4. Creeu un degradat amb una direcció. Afegir una direcció al degradat permet ajustar la forma en què canvia el color. Tingueu en compte que diferents navegadors interpretaran les indicacions de manera diferent. Tots mostraran el mateix degradat de color.

    ! DOCTYPE html> html> head> style> html {min-height: 100%; } cos {fons: -webkit-linear-gradient (esquerra, # 93B874, # C9DCB9); / * d'esquerra a dreta * / background: -o-linear-gradient (dreta, # 93B874, # C9DCB9); / * final a la dreta * / background: -moz-linear-gradient (dreta, # 93B874, # C9DCB9); / * final a la dreta * / fons: gradient lineal (a la dreta, # 93B874, # C9DCB9); / * es mou cap a la dreta * / background-color: # 93B874; / * és una bona idea establir un color de fons, en cas que el degradat no es carregui * /} / style> / head> body> / body> / html>

  5. Utilitzeu altres propietats per ajustar el degradat. Podeu fer molt més amb els degradats.
    • Per exemple, no només podeu utilitzar més de dos colors, sinó també col·locar un percentatge darrere de cadascun. Amb això, podeu indicar l'espai que obtindrà cada segment de color.

      fons: gradient lineal (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

    • Afegiu transparència als colors. Amb això, podeu esvair els colors. Utilitzeu el mateix color per esvair del color fins al no-res. T’encantarà la funció rgba () s'ha d'utilitzar per indicar el color. El valor final determina el grau de transparència: 0 per opac i 1 per transparent.

      fons: gradient lineal (a la dreta, rgba (147.184.116,0), rgba (147.184.116,1));

Mètode 4 de 4: definiu una animació en color com a fons de pantalla

  1. Aneu a estil> al vostre codi HTML. Si trobeu un color de fons sòlid però no, experimenteu amb el canvi de fons de color. A partir de l'HTML 5, els colors de fons s'han de definir amb CSS (Fulls d'estil en cascada). Si mai no heu definit un color de fons amb CSS, llegiu la secció sobre l'establiment d'un color de fons sòlid abans de provar aquest mètode.
  2. Afegiu la propietat animació a l'element "cos". Haureu d’afegir 2 propietats diferents, ja que cada navegador requereix un codi diferent.

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinit; animació: colorchange 60s infinit; } / style> / head> body> / body> / html>

    • -webkit-animació la propietat és necessària per als navegadors basats en Chrome (Chrome, Opera, Safari). animació és l'estàndard per a la resta de navegadors.
    • canvi de color és el que s'anomena l'animació en aquest exemple.
    • Anys 60 és la durada (60 segons) de l'animació / transició. Assegureu-vos d’establir-ho tant per al webkit com per a la sintaxi predeterminada.
    • infinit indica que l'animació s'ha de repetir indefinidament. Si preferiu fer un bucle de colors i després aturar-vos en l'últim color, podeu ometre aquesta part.
  3. Afegiu colors a la vostra animació. Ara faràs servir la regla @keyframes per establir els colors de fons a passar, així com quant de temps es pot veure cada color a la pàgina. Una vegada més, haureu d'afegir diverses codificacions per als diversos navegadors.

    ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinit; animació: colorchange 60s infinit; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

    • Tingueu en compte que les dues línies (@ -webkit-keyframes i @ clausframes tenen els mateixos valors per als colors i els percentatges de fons. Ha de romandre uniforme perquè l'experiència sigui la mateixa per a tots els navegadors.
    • Els percentatges (0%, 25%, etc.) representen la durada total de l’animació (Anys 60). Quan es carregui la pàgina, el fons tindrà el color definit 0% i (# 33FFF3). Quan s'hagi reproduït el 25% o 60 segons de l'animació, el fons passarà a # 78281F, etcètera.
    • Podeu ajustar la durada i els colors segons vulgueu.

Articles Fascinants

Escriu en un codi secret
Escriu en un codi secret
Aprendre l’adherència correcta per a una bola d’impacte (grill)
Aprendre l’adherència correcta per a una bola d’impacte (grill)
Salutacions en àrab
Salutacions en àrab
Arreglar el singlot en un bebè
Arreglar el singlot en un bebè