Com canviar el color de fons amb CSS

Com canviar el color de fons amb CSS

Un dels moments més emocionants de la carrera de desenvolupadors frontals incipients és aprendre a canviar el color de fons d’una pàgina web.





Treballar amb HTML és fantàstic i tot, però amb poques línies de CSS podeu fer que les vostres pàgines i el vostre viatge de programació tinguin vida.



Aquesta guia cobrirà tot el que heu de saber sobre com canviar el color de fons amb CSS.





Configureu-vos

Eliminem una mica de treball preliminar.

com fer un món de minecraft multijugador

Nota : Recomano utilitzar-lo Visual Studio Code amb el Extensió Live Server per veure els canvis en temps real a mesura que actualitzeu l'HTML i el CSS.



  1. Creeu una carpeta per als fitxers del vostre projecte.
  2. Crea un index.html fitxer per allotjar el vostre HTML. Podeu utilitzar el codi boilerplate o simplement configurar-ne alguns , , i etiquetes.
  3. Crea un styles.css per al vostre CSS.
  4. Col·loqueu l'enllaç del fitxer CSS amb l'HTML dins del etiquetes.

Ara ja podeu començar a editar el CSS.

Relacionat: Com es crea un lloc web Boilerplate



Com canviar el color de fons amb CSS

La forma més senzilla de canviar el color de fons és orientar el fitxer cos etiqueta. A continuació, editeu el fitxer color de fons propietat. Podeu trobar codis de colors cercant i utilitzant l'extensió del navegador Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Aquest codi canvia el fons a un blau clar.



El color de fons La propietat accepta colors en sis formes diferents:

  • nom : blau clar; (per a una aproximació aproximada)
  • codi hexadecimal : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); on a és alfa (opacitat)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); on a és alfa (opacitat)

Utilitzeu la taquigrafia antecedents propietat en lloc de color de fons per tallar codi addicional. Podeu canviar el color de fons de qualsevol element HTML mitjançant aquest mètode.

Crea un element i donar-li una classe; en aquest cas, la classe és panell . Estableix el seu alçada i amplada propietats a CSS. Seleccioneu l'element a CSS i acoloreu-lo.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Aquí podeu veure el cos antecedents la propietat té un estil independentment de la .panel antecedents propietat.

La propietat de fons també accepta degradats:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Com canviar la imatge de fons a CSS

Què passa si voleu que el fons sigui una imatge més que un color o un degradat sòlid? La taquigrafia antecedents la propietat és un amic familiar.

Assegureu-vos que la imatge es troba a la mateixa carpeta que els fitxers HTML i CSS. En cas contrari, haureu d’utilitzar la ruta del fitxer dins dels parèntesis en lloc del nom:

body {
background: url(leaves-and-trees.jpg)
}

Vaja! Sembla que la imatge està massa ampliada. Podeu solucionar-ho amb mida de fons propietat.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Per fer servir la taquigrafia antecedents propietat conjuntament amb el mida de fons propietat coberta , també heu d'especificar posició de fons propietats i separeu els valors amb una barra invertida (fins i tot si són valors de posició predeterminats com a dalt a l'esquerra .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Aquí està! Una imatge de fons de mida adequada en una línia de CSS.

Llegeix més: Com definir una imatge de fons a CSS

Nota : Desconfieu d'incloure imatges de fons grans que ocupin molt d'espai d'emmagatzematge. Aquests poden ser difícils de carregar al mòbil, on disposeu de dos segons per donar als usuaris una raó per romandre a la pàgina.

Feu créixer el vostre joc CSS amb CSS box-shadow

Per a un desenvolupador com vosaltres, les propietats del color de fons i de la imatge de fons són notícies antigues. Per sort, sempre hi ha alguna cosa nova per aprendre.

Proveu de donar un impuls a les vostres caixes amb CSS box-shadow. Els vostres elements HTML mai no han tingut un aspecte millor.

Compartir Compartir Tweet Correu electrònic Com utilitzar CSS box-shadow: 13 trucs i exemples

Les caixes Bland semblen avorrides. Afegiu-los amb l’efecte ombra caixa CSS.

Llegiu a continuació Temes relacionats
  • Programació
  • Desenvolupament web
  • Web Design
  • CSS
Sobre l'autor Marcus Mears III(26 articles publicats)

Marcus és un entusiasta de la tecnologia de tota la vida i editor d’escriptors a MUO. Va començar la seva carrera d’escriptor independent el 2020, cobrint tecnologia de punta, aparells, aplicacions i programari. Va estudiar Informàtica a la universitat amb un enfocament en el desenvolupament web frontal.

Més de Marcus Mears III

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us