Properti background-color di CSS menerapkan warna solid sebagai latar belakang pada sebuah elemen. Berikut contohnya:
html ( background-color: #82a43a; )Contoh yang digunakan di atas ( #82a43a) disebut kode hex, dan ini adalah salah satu dari beberapa cara CSS harus mewakili satu warna. Ada beberapa cara untuk menemukan kode hex yang tepat. Siapa pun yang pernah menggunakan alat desain telah melihat pemilih warna yang mirip dengan ini:
Kode hex adalah salah satu cara untuk mendeklarasikan warna di CSS. Ada juga banyak nama yang bisa Anda gunakan, misalnya:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Warna-warna ini tidak terlalu fleksibel, tetapi bisa berguna dalam keadaan darurat. Mereka lebih mudah diingat daripada kode hex, dan ada banyak sekali.
Cara lain untuk menyatakan warna adalah dengan menggunakan RGB, RGBa, HSL, atau HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Tidak seperti kode hex, nilai-nilai ini memungkinkan transparansi (alfa), yang bisa sangat berguna. Pelajari lebih lanjut tentang RGBa atau HSLa.
Demo
Lihat warna latar belakang Pena oleh CSS-Trik (@ css-trick) di CodePen.
Terkait
- background-attachment
- klip latar belakang
- gambar latar belakang
- background-origin
- background-position
- ulangi latar belakang
- background-size
Sumber Daya Lainnya
- Spesifikasi CSS3
- MDN
Dukungan Browser
Kode hex dan sebagian besar nama warna dapat digunakan di mana saja. RGBa dan HSLa memiliki rangkaian dukungan browser mereka sendiri: RGBa dan HSLa.
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja |