Latar Belakang CSS
Properti latar belakang CSS digunakan untuk menambahkan efek latar belakang untuk elemen.
Dalam bab ini, Anda akan mempelajari tentang properti latar belakang CSS berikut:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(properti singkatan)
Warna latar belakang CSS
Properti background-colormenentukan warna latar belakang 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)"
Lihat Nilai Warna CSS untuk daftar lengkap kemungkinan nilai warna.
Elemen lainnya
Anda dapat mengatur warna latar belakang untuk elemen HTML apa pun:
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;
}
Opasitas / Transparansi
Properti opacitymenentukan opacity/transparansi suatu elemen. Itu dapat mengambil nilai dari 0,0 - 1,0. Nilai yang lebih rendah, semakin transparan:
opasitas 1
opasitas 0,6
opasitas 0,3
opasitas 0,1
Contoh
div {
background-color: green;
opacity: 0.3;
}
Catatan: Saat menggunakan opacityproperti untuk menambahkan transparansi ke latar belakang elemen, semua elemen turunannya mewarisi transparansi yang sama. Ini dapat membuat teks di dalam elemen yang sepenuhnya transparan sulit dibaca.
Transparansi menggunakan RGBA
Jika Anda tidak ingin menerapkan opacity ke elemen anak, seperti pada contoh kami di atas, gunakan nilai warna RGBA . Contoh berikut mengatur opacity untuk warna latar belakang dan bukan teks:
100% opasitas
60% opasitas
30% opasitas
10% opasitas
Anda belajar dari Bab Warna CSS kami , bahwa Anda dapat menggunakan RGB sebagai nilai warna. Selain RGB, Anda dapat menggunakan nilai warna RGB dengan saluran alfa (RGB A ) - yang menentukan opasitas untuk warna.
Nilai warna RGBA ditentukan dengan: rgba(red, green, blue, alpha ). Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (buram sepenuhnya).
Tip: Anda akan mempelajari lebih lanjut tentang Warna RGBA di Bab Warna CSS kami .
Contoh
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}