Warna latar - Trik CSS

Anonim

Properti warna latar dalam CSS menggunakan warna pepejal sebagai latar pada elemen. Inilah contohnya:

html ( background-color: #82a43a; )

Contoh yang digunakan di atas ( #82a43a) disebut kod hex, dan ini adalah salah satu daripada beberapa cara yang CSS harus mewakili satu warna. Terdapat beberapa cara untuk mencari kod hex yang betul. Sesiapa yang telah menggunakan alat reka bentuk telah melihat pemilih warna yang serupa dengan ini:

Perhatikan kod hex di tengah bawah.

Kod hex adalah salah satu cara untuk menyatakan warna dalam CSS. Terdapat juga sejumlah besar nama yang boleh anda gunakan, contohnya:

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

Warna-warna ini tidak terlalu fleksibel, tetapi warnanya sangat berguna. Mereka lebih mudah diingat daripada kod hex, dan ada banyak kodnya.

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 kod hex, nilai-nilai ini memungkinkan ketelusan (alpha), yang sangat berguna. Ketahui lebih lanjut mengenai RGBa atau HSLa.

Demo

Lihat warna latar belakang Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • latar belakang-lampiran
  • latar-klip
  • gambar latar belakang
  • latar-asal
  • latar belakang-kedudukan
  • latar belakang-ulangan
  • ukuran latar belakang

Lebih Banyak Sumber

  • Spesifikasi CSS3
  • MDN

Sokongan Penyemak Imbas

Kod hex dan kebanyakan nama warna berfungsi di mana sahaja. RGBa dan HSLa mempunyai set sokongan penyemak imbas mereka sendiri: RGBa dan HSLa.

Chrome Safari Firefox Opera IE Android iOS
Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi Berfungsi