Latar Belakang CSS

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

Dalam bab ini, anda akan belajar tentang properti 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

Penetapan warna latar belakang halaman seperti berikut:

body {
  background-color: biru terang;
}

Cuba Sendiri

Dengan CSS, warna biasanya ditentukan dengan cara berikut:

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

Lihat: Nilai Warna CSS，dapatkan daftar penuh nilai warna yang mungkin.

Elemen lainnya

Anda dapat menetapkan 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: biru terang;
}
p {
  background-color: yellow;
}

Cuba Sendiri

Kepadatan / kecerahan

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

kepadatan 1
kepadatan 0.6
kepadatan 0.3
kepadatan 0.1

Contoh

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

Cuba Sendiri

Perhatian:Gunakan kepadatan Ketika atribut kepadatan ditetapkan untuk latar belakang elemen, semua elemen anaknya mewarisi kepadatan yang sama. Ini mungkin akan membuat teks di dalam elemen yang lembut sulit untuk dibaca.

Kepadatan kepadatan menggunakan RGBA

Jika anda tidak ingin menerapkan kepadatan ke elemen anak, seperti contoh di atas, gunakan RGBA Nilai warna. Contoh di bawah ini menetapkan warna latar belakang bukan kepadatan teks:

100% kepadatan
60% kepadatan
30% keselamatan
10% keselamatan

dari Warna CSS dalam bab ini belajar bagaimana mengguna pakai RGB sebagai nilai warna. Selain RGB, anda boleh gunakan nilai warna RGB dengan alpha Dipakai bersama-sama (RGBA) - Lelang ini menentukan keselamatan warna.

Nilai warna RGBA dinyatakan: rgba(red, green, blue, alpha)。alpha Parameter adalah nombor antara 0.0 (sepenuhnya luhur) dan 1.0 (tidak luhur seketika).

Panduan:Anda boleh melihat di Warna CSS Anda boleh belajar lebih banyak tentang warna RGBA di bab ini.

Contoh

div {
  background: rgba(0, 128, 0, 0.3) /* 30% keselamatan latar belakang hijau */
}

Cuba Sendiri