Culoare de fundal - CSS-Tricks

Anonim

Proprietatea de culoare de fundal din CSS aplică culori solide ca fundal pe un element. Iată un exemplu:

html ( background-color: #82a43a; )

Exemplul folosit mai sus ( #82a43a) se numește cod hex și este unul dintre mai multe moduri în care CSS trebuie să reprezinte o singură culoare. Există mai multe moduri de a găsi codurile hex. Oricine a folosit un instrument de proiectare a văzut un selector de culori similar cu acesta:

Rețineți codul hexagonal din mijlocul inferior.

Codurile hexagonale sunt o modalitate de a declara o culoare în CSS. Există, de asemenea, o grămadă de nume pe care le puteți folosi, de exemplu:

.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )

Aceste culori nu sunt foarte flexibile, dar pot fi utile la un vârf. Sunt mai ușor de reținut decât codurile hex, și există o mulțime de ele.

O altă modalitate de a declara o culoare este utilizarea RGB, RGBa, HSL sau HSLa:

#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )

Spre deosebire de codurile hex, aceste valori permit transparența (alfa), care poate fi foarte utilă. Aflați mai multe despre RGBa sau HSLa.

Demo

Vedeți culoarea de fundal a stiloului de CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

  • atașament de fundal
  • clip de fundal
  • imagine de fundal
  • fundal-origine
  • fundal-poziție
  • fundal-repetare
  • dimensiunea fundalului

Mai multe resurse

  • Spec. CSS3
  • MDN

Suport pentru browser

Codurile hexagonale și cele mai multe nume de culori funcționează peste tot. RGBa și HSLa au propriile seturi de suport pentru browser: RGBa și HSLa.

Crom Safari Firefox Operă IE Android iOS
Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări Lucrări