Properti background CSS digunakan untuk menambahkan efek latar belakang untuk elemen.
Properti background-color
Properti background-color menentukan warna latar belakang dari
elemen.
Contoh
Warna latar belakang halaman diatur seperti ini:
body {
background-color: lightblue;
}
Dengan 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
Anda dapat mengatur warna latar belakang untuk setiap elemen HTML.
Contoh
Di sini, elemen <h1>, <p>, dan <div> akan memiliki warna latar belakang yang berbeda:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Opacity / Transparansi
Properti opacity menentukan opacity / transparansi elemen dengan
dapat mengambil nilai dari 0,0 - 1,0. Nilai yang lebih rendah, akan lebih
transparan.
Contoh
div {
background-color: green;
opacity: 0.3;
}
Catatan: Saat menggunakan properti opacity untuk
menambahkan transparansi ke latar belakang suatu elemen, semua elemen
turunannya mewarisi transparansi yang sama. Ini dapat membuat teks di dalam
elemen transparan sepenuhnya sulit dibaca.
Transparansi menggunakan RGBA
Jika Anda tidak ingin menerapkan opasitas ke child elemen, seperti dalam contoh di atas, gunakan nilai warna RGBA .
Anda mungkin telah belajar dari postingan mengenai Warna CSS, bahwa Anda dapat menggunakan RGB sebagai nilai warna. Selain RGB, Anda dapat menggunakan nilai warna RGB dengan saluran alfa (RGB A) - yang menentukan opasitas suatu warna.
Nilai warna RGBA ditentukan dengan: rgba (red, green, blue, alfa ). Parameter alfa adalah angka antara 0,0 (seluruhnya transparan) dan 1,0 (buram).
Contoh
div {
background: rgba(0, 128, 0, 0.3) /* Background hijau dengan 30% opacity
*/
}
Komentar
Posting Komentar