Properti background CSS digunakan untuk menentukan efek latar belakang elemen.
Berikut ini yang akan kita pelajari dalam properti background CSS:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Section Artikel
Warna latar belakang CSS
Properti background-color menentukan warna latar belakang sebuah elemen.
Contoh
Warna latar belakang halaman diatur seperti ini:
<!DOCTYPE html> <html> <head> <style> body { background-color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>background-color nya memakai warna merah!</p> </body> </html>
Di CSS warna paling sering ditentukan oleh:
nama warna yang valid – seperti “merah”
nilai HEX – seperti “# ff0000”
nilai RGB – seperti “rgb (255,0,0)”
Elemen Lainnya
Kita bisa mengatur warna latar belakang untuk setiap elemen HTML:
Contoh
Di sini, elemen <h1> ,<p> , dan <div> akan memiliki warna latar belakang 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 belakang CSS! </h1>
<div>
Ini adalah teks di dalam elemen div.
<p> Paragraf ini memiliki warna latar belakangnya sendiri. </p>
Kami masih dalam elemen div.
</div>
</body>
</html>
Opacity / Transparansi
Properti opacity menentukan opacity / transparansi suatu elemen. Properti ini bisa mengambil nilai dari 0,0 – 1,0. Nilai yang lebih rendah, 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>Transparent Box</h1>
<p> Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang sebuah elemen, semua elemen turunannya juga menjadi transparan. Ini dapat membuat teks di dalam elemen transparan sepenuhnya sulit dibaca: </p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
Catatan: Saat menggunakan properti opacity untuk menambahkan transparansi ke latar belakang sebuah elemen, semua elemen turunannya mewarisi transparansi yang sama. Hal ini dapat membuat teks di dalam elemen transparan sepenuhnya sulit dibaca.
Transparansi menggunakan RGBA
Jika kita tidak ingin menerapkan opasitas ke elemen anak seperti dalam contoh di atas, gunakan nilai warna RGBA. Contoh berikut menyetel opasitas untuk warna latar belakang dan bukan teksnya:
Nilai warna RGBA ditentukan dengan: rgba (red, green, blue, alfa). Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya tidak tembus pandang).
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>Transparent Box</h1>
<p>With opacity:</p>
<div style="opacity:0.1;">
<h1>10% opacity</h1>
</div>
<div style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>
<div>
<h1>opacity 1</h1>
</div>
<p>RGBA:</p>
<div class="first">
<h1>10% opacity</h1>
</div>
<div class="second">
<h1>30% opacity</h1>
</div>
<div class="third">
<h1>60% opacity</h1>
</div>
<div>
<h1>default</h1>
</div>
<p> Perhatikan bagaimana teks menjadi transparan serta warna latar belakang saat menggunakan properti opacity. </p>
</body>
</html>
