Codingku

background-color

Properti background-color digunakan untuk mengatur latar belakang suatu elemen.

Properti ini menetapkan warna latar belakang menggunakan nilai color.

Elemen ini juga dapat memiliki satu atau beberapa gambar latar belakang yang diatur menggunakan properti gambar latar belakang.

Warna yang diatur dengan background-color diambil di belakang gambar latar belakang apa pun.

Jika satu gambar latar belakang diatur dan gambar tersebut ternyata tidak valid, maka gambar latar belakang akan terlihat.

Warna latar belakang terpotong sesuai dengan nilai background-clip yang terkait dengan gambar latar paling bawah.

Terkadang, bahkan jika gambar latar belakang yang valid diatur, warnanya masih dapat terlihat jika gambar latar tidak sepenuhnya buram, seperti jika kamu menggunakan gambar dengan area yang sepenuhnya transparan (gambar dengan saluran alfa).

CSS Syntax

background-color: color | transparent | initial | inherit;

Javascript Syntax

object.style.backgroundColor="#00FF00"

default background-color: transparent;

Secara default, warna latar adalah transparan , jadi pada dasarnya tidak ada warna latar.

background-color: red;

Kamu bisa menggunakan salah satu dari 140+ nama warna.

background-color: #05ffb0;

Kamu dapat menggunakan kode warna heksadesimal .

background-color: rgb(50, 115, 220);

Kamu dapat menggunakan kode warna rgb() :

  • nilai pertama adalah untuk red
  • nilai kedua adalah untuk green
  • nilai ketiga adalah untuk blue

Masing-masing dari mereka dapat memiliki nilai antara 0 dan 255 .

background-color: rgba(50, 115, 220, 0.3);

Kamu dapat menggunakan kode warna rgba() :

  • 3 nilai pertama adalah untuk rgb
  • nilai ke-4 adalah untuk saluran alpha dan mendefinisikan opacity warna
  • nilai ketiga adalah untuk blue

Nilai alfa dapat berubah dari nol 0 (transparan) menjadi satu 1 (buram).

background-color: hsl(14, 100%, 53%);

Anda dapat menggunakan kode warna hsl() :

  • nilai pertama adalah untuk hue dan dapat beralih dari 0 ke 359
  • nilai kedua adalah untuk saturation dan beralih dari 0% ke 100%
  • nilai ketiga adalah untuk luminosity dan beralih dari 0% ke 100%

background-color: hsla(14, 100%, 53%, 0.6);

Kamu dapat menggunakan kode warna hsl() :

  • 3 nilai pertama adalah untuk hsl
  • nilai ke-4 adalah untuk saluran alpha dan mendefinisikan opacity warna

Nilai alfa dapat berubah dari nol 0 (transparan) menjadi satu 1 (buram).