Latar Belakang CSS

Atribut latar belakang CSS digunakan untuk mendefinisikan efek latar belakang elemen.

Dalam bab ini, Anda akan belajar tentang atribut latar belakang CSS berikut:

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

CSS background-color

background-color Atribut menentukan warna latar belakang elemen.

Contoh

Pengaturan warna latar belakang halaman adalah seperti ini:

body {
  background-color: biru cerah;
}

Coba Sendiri

Dengan CSS, warna biasanya ditentukan dengan cara berikut:

  • Nama warna yang berlaku - seperti "merah"
  • Nilai heksadesimal - seperti "#ff0000"
  • Nilai RGB - seperti "rgb(255,0,0)"

Lihat Nilai Warna CSS，dapatkan daftar lengkap warna yang mungkin.

Elemen lainnya

Anda dapat menetapkan warna latar belakang bagi 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: biru cerah;
}
p {
  background-color: yellow;
}

Coba Sendiri

Kerapatan/Transparan

Atribut kecerahan menentukan kecerahan/kerapatan elemen. Angka antara 0.0 - 1.0. Nilai yang lebih rendah, semakin transparan:

kecerahan 1
kecerahan 0.6
kecerahan 0.3
kecerahan 0.1

Contoh

div {
  background-color: green;
  kecerahan: 0.3;
}

Coba Sendiri

Perhatian:Gunakan kecerahan Ketika atribut kecerahan ditambahkan ke latar belakang elemen, semua elemen anaknya mewarisi kecerahan yang sama. Ini mungkin akan membuat teks yang sulit dibaca di dalam elemen yang lurus transparen.

kecerahan RGBA

Jika Anda tidak ingin menerapkan kecerahan bagi elemen anak, seperti contoh di atas, gunakan RGBA Nilai warna. Contoh di bawah ini mengatur warna latar belakang bukan kecerahan teks:

100% kecerahan
60% kecerahan
30% kepadatan
10% kepadatan

Dari Warna CSS Dalam bab ini, Anda belajar cara menggunakan RGB sebagai nilai warna. Selain RGB, Anda juga dapat menggunakan nilai warna RGB dengan alpha Lapisan bersamaan digunakan (RGBA) - Lapisan ini menentukan kepadatan warna.

Nilai warna RGBA ditentukan sebagai: rgba(merah, hijau, biru, alpha)。alpha Parameter adalah angka yang berada di antara 0.0 (sama sekali transparan) dan 1.0 (sama sekali tak transparan).

Petunjuk:Anda dapat menemukan informasi lebih lanjut di Warna CSS Dalam bab ini, Anda akan mempelajari lebih lanjut tentang warna RGBA.

Contoh

div {
  background: rgba(0, 128, 0, 0.3) /* Latar belakang hijau dengan kepadatan 30% */
}

Coba Sendiri