Warna Latar Belakang CSS

View Categories

Warna Latar Belakang CSS

Properti background-color pada CSS digunakan untuk menambahkan efek warna latar belakang.

CSS background-color

Properti background-color menentukan warna latar belakang suatu elemen.

Contoh

Warna latar halaman diatur seperti ini:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>Halo Dunia!</h1>

<p>Halaman ini memiliki warna latar belakang biru muda!</p>

</body></html>

Jalankan Contoh

Menurut ketentuan CSS, warna ditentukan oleh:

  • Nama warna yang valid : “red”
  • Nilai HEX :“#ff0000”
  • Nilai RGB :“rgb(255,0,0)”

Contoh Lainnya

Pada setiap elemen HTML warna latar belakang dapat diubah :

Contoh

Elemen <h1>, <p>, dan <div> akan memiliki warna latar yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Contoh warna latar CSS!</h1>
<div>
Ini adalah teks di dalam elemen div.
<p>Paragraf ini memiliki warna latar belakang sendiri.</p>
Bagian ini masih di dalam elemen div.
</div>

</body></html>

Jalankan Contoh

Transparan (Opacity)

Properti opacity menentukan opacity/transparency suatu elemen. Nilai properti ini mengambil nilai dari 0,0 – 1,0. Semakin rendah nilainya, maka suatu elemen akan semakin transparan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>

<h1>Kotak Transparan</h1>

<p>Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang suatu elemen, semua elemen turunannya juga menjadi transparan. Hal ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca:</p>

<div class="pertama">
<h1>opasitas 0,1</h1>
</div>

<div class="kedua">
<h1>opasitas 0,3</h1>
</div>

<div class="ketiga">
<h1>opasitas 0,6</h1>
</div>

<div>
<h1>opasitas 1 (default)</h1>
</div>

</body></html>

Jalankan Contoh

Transparansi Menggunakan RGBA

Sebelumnya telah dipelajari pada bagian Warna CSS, bahwa nilai RGB dapat dipakai sebagai nilai warna. Selain RGB, juga dapat digunakan nilai warna RGB dengan saluran alpha (RGBA) untuk menentukan opasitas warna.

Nilai warna RGBA ditentukan dengan: rgba(red, green, blue, alpha). Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

Tips: Untuk mempelajari lebih lanjut bisa membuka kembali di bagian Warna CSS.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: rgb(0, 128, 0);
}

div.first {
  background: rgba(0, 128, 0, 0.1);
}

div.second {
  background: rgba(0, 128, 0, 0.3);
}

div.third {
  background: rgba(0, 128, 0, 0.6);
}
</style>
</head>
<body>

<h1>Kotak Transparan 2</h1>

<p>Mengatur transparansi dengan menggunakan properti opacity:</p>

<div style="opacity:0.1;">
<h1>Opasitas 10%</h1>
</div>

<div style="opacity:0.3;">
<h1>Opasitas 30%</h1>
</div>

<div style="opacity:0.6;">
<h1>60% opasitas</h1>
</div>

<div>
<h1>opasitas 1</h1>
</div>

<p>Mengatur transparansi dengan menggunakan rgba():</p>

<div class="first">
<h1>Opasitas 10%</h1>
</div>

<div class="second">
<h1>30% opasitas</h1>
</div>

<div class="third">
<h1>60% opasitas</h1>
</div>

<div>
<h1>default</h1>
</div>

<p>Perhatikan bahwa teks serta warna latar belakang akan menjadi sama-sama transparan saat menggunakan properti opacity. Hal ini tidak terjadi apabila menggunakan rgba()</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Warna CSS
Tutorial setelahnya : Gambar Sebagai Latar Belakang Dengan CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan