Cum se schimbă culoarea de fundal cu CSS

Cum se schimbă culoarea de fundal cu CSS

Unul dintre cele mai interesante momente din cariera oricărui dezvoltator de front-end în devenire este să înveți cum să schimbi culoarea de fundal a unei pagini web.





Lucrul cu HTML este minunat și totul, dar cu doar câteva linii de CSS puteți face ca paginile dvs. și călătoria dvs. de programare să înflorească la viață.



Acest ghid va acoperi tot ce trebuie să știți despre cum să schimbați culoarea de fundal cu CSS.





Pregătește-te

Să eliminăm o mică lucrare preliminară.

ar trebui să folosesc mbr sau gpt pentru SSD

Notă : Recomand utilizarea Cod Visual Studio cu Extensie Live Server pentru a vizualiza modificările în timp real pe măsură ce actualizați HTML și CSS.



  1. Creați un folder pentru fișierele proiectului dvs.
  2. Creaza un index.html fișier pentru a găzdui codul HTML. Puteți utiliza codul boilerplate sau pur și simplu configurați unele , , și Etichete.
  3. Creeaza o stiluri.css fișier pentru CSS.
  4. Conectați fișierul CSS cu codul HTML plasând în interiorul Etichete.

Acum sunteți gata să începeți editarea CSS.

Legate de: Cum să creați un site web Boilerplate



Cum se schimbă culoarea de fundal cu CSS

Cel mai simplu mod de a schimba culoarea de fundal este prin direcționarea corp etichetă. Apoi, editați fișierul culoare de fundal proprietate. Puteți găsi coduri de culori căutând și utilizând extensia de browser Google Color Picker

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

Acest cod schimbă fundalul într-un albastru deschis frumos.



The culoare de fundal proprietatea acceptă culori în șase forme diferite:

  • Nume : albastru deschis; (pentru o aproximare apropiată)
  • cod hex : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); Unde la este alfa (opacitate)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); Unde la este alfa (opacitate)

Folosiți stenograma fundal proprietate în locul culoare de fundal pentru a reduce codul suplimentar. Puteți modifica culoarea de fundal a oricărui element HTML folosind această metodă.

Creeaza o element și dă-i o clasă - în acest caz, clasa este panou . Setați-l înălţime și lăţime proprietăți în CSS. Selectați elementul în CSS și colorați.

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;
}

Aici puteți vedea corp fundal proprietatea este stilată independent de .panou fundal proprietate.

Proprietatea de fundal acceptă și gradienți:

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

Cum să schimbați imaginea de fundal în CSS

Ce se întâmplă dacă doriți ca fundalul să fie mai degrabă o imagine decât o culoare solidă sau un gradient? Stenografia fundal proprietatea este un prieten familiar.

Asigurați-vă că imaginea se află în același folder cu fișierele dvs. HTML și CSS. Altfel va trebui să utilizați calea fișierului în paranteze, mai degrabă decât doar numele:

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

Whoah! Se pare că imaginea este prea mărită. Puteți remedia problema cu ajutorul dimensiunea fundalului proprietate.

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

Pentru a utiliza stenograma fundal proprietate coroborată cu dimensiunea fundalului proprietate acoperi , trebuie să specificați și fundal-poziție proprietăți și separați valorile cu o bară inversă (chiar dacă sunt valori de poziție implicite, cum ar fi stânga sus .)

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

Gata! O imagine de fundal dimensionată corespunzător într-o singură linie de CSS.

Citeste mai mult: Cum să setați o imagine de fundal în CSS

Notă : Aveți grijă să includeți imagini de fundal mari care ocupă mult spațiu de stocare. Acestea pot fi greu de încărcat pe mobil, unde aveți la dispoziție toate cele două secunde pentru a oferi utilizatorilor un motiv pentru a rămâne pe pagină.

Creează-ți jocul CSS cu CSS box-shadow

Pentru un dezvoltator precum dumneavoastră, proprietățile culorii de fundal și ale imaginii de fundal sunt noutăți vechi. Din fericire, există întotdeauna ceva nou de învățat.

Încercați să dați cutiei dvs. un impuls cu CSS box-shadow. Elementele dvs. HTML nu au arătat niciodată mai bine!

Acțiune Acțiune Tweet E-mail Cum se folosește CSS box-shadow: 13 trucuri și exemple

Cutiile Bland par plictisitoare. Ridică-le cu efectul CSS-box-shadow!

Citiți în continuare Subiecte asemănătoare
  • Programare
  • Dezvoltare web
  • Web design
  • CSS
Despre autor Marcus Mears III(26 articole publicate)

Marcus este un pasionat de tehnologie pe tot parcursul vieții și editor scriitor la MUO. El și-a început cariera de scriitor independent în 2020, acoperind tehnologie, gadget-uri, aplicații și software de ultimă generație. A studiat Informatica la facultate, cu accent pe dezvoltarea web front-end.

Mai multe de la Marcus Mears III

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona