Dibaca: 125

CSS Background Color

CSS Background

Properti background pada CSS digunakan untuk mendefinisikan latar dari elemen HTML.

Berikut adalah Properti background pada CSS:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

Properti background-color digunakan untuk memberikan warna pada latar dari elemen HTML.

Properti background-color bisa diberikan pada hampir semua elemen HTML. 

Opacity dan Transparansi

Properti opacity digunakan untuk menyatakan transparansi dari elemen. Nilainya bisa pecahan antara 0 dan 1, makin kecil nilainya maka makin transparan dan makin besar nilainya maka makin solid.

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Background dengan Opacity</title>
   </head>
   <body> 
      <p style="background-color:blue;opacity: 0.3;">Warna biru dengan opacity 0,3</p>
      <p style="background-color:blue;opacity: 0.6;">Warna biru dengan opacity 0,6</p>
      <p style="background-color:blue;opacity: 1;">Warna biru dengan opacity 1</p> 
   </body>
</html>

Berikut adalah hasilnya bila dilihat dengan browser.

css-background-opacity 

Transparansi dengan RGBA

Untuk mendefinisikan transparansi pada elemen HTML juga bisa dengan nilai warna RGBA.
Nilai RGBA adalah singkatan dari R untuk Red (merah), G untuk Green (hijau), dan B untuk Blue (biru), Sedangkan A untuk Alpha (transparansi).

Nilai untuk RGB masing-masing adalah dari 0 sampai 255, sedangkan untuk Alpha adalah nilai pecahan dari 0 sampai 1, dengan nilai makin kecil makin transparan dan nilai makin besar makin solid. Untuk penjelasan lebih detil lihat pada pembahasan CSS warna RGB dan RGBA.

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Background dengan RGBA</title>
   </head>
   <body> 
      <p style="background: rgba(255, 0, 0, 0.3)">Warna merah RGBA dengan alpha 0,3</p>
      <p style="background: rgba(255, 0, 0, 0.6)">Warna merah RGBA dengan alpha 0,6</p>
      <p style="background: rgba(255, 0, 0, 1)">Warna merah RGBA dengan alpha 1</p> 
   </body>
</html>

Berikut adalah hasilnya bila dilihat dengan browser.

 css-background-rgba