Beranda / CSS / Pemrograman / Web

Mengenal CSS Backgrounds: Dari Warna sampai Transparansi (Tutorial CSS Part 10)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 10.0 : Logo CSS

Kalau kamu lagi ngulik-ngulik CSS, pasti bakal sering ketemu yang namanya background. Nah, di artikel ini kita bakal bahas seputar CSS Backgrounds—mulai dari cara ganti warna latar belakang sampai bikin elemen jadi transparan. Yuk, kita bahas satu per satu!

1. CSS background-color

Properti background-color dipakai buat ngasih warna ke latar belakang suatu elemen. Cara pakainya simpel banget: 

div {
  background-color: lightblue;
}

Kamu bisa pakai nama warna (kayak red, blue, dll), kode heksadesimal (#ff0000), RGB (rgb(255, 0, 0)), atau RGBA (yang nanti kita bahas juga).

Contoh dengan menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .warna-biru {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="warna-biru">
    Ini div dengan background biru muda.
  </div>
</body>
</html>

Hasilnya:

Contoh CSS Background Color
Gambar 10.1 : Contoh CSS Background Color

2. Background di Elemen Lain

Bukan cuma <div> aja yang bisa dikasih background, hampir semua elemen HTML bisa. Contohnya: 

body {
  background-color: #f0f0f0;
}

p {
  background-color: yellow;
}

button {
  background-color: green;
  color: white;
}

Tips: Kalau kamu mau tampilan web lebih "hidup", mainin warna latar ini bisa jadi trik yang ampuh!

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    p {
      background-color: yellow;
    }
    button {
      background-color: green;
      color: white;
    }
  </style>
</head>
<body>
  <p>Ini paragraf dengan background kuning.</p>
  <button>Klik Aku</button>
</body>
</html>

Hasilnya:

Contoh CSS Background Color di Elemen Lain
Gambar 10.2 : Contoh CSS Background Color di elemen lain

3. Opacity / Transparansi

Kalau kamu mau elemen keliatan transparan (misalnya biar bisa lihat elemen di belakangnya), kamu bisa pakai properti opacity. 

div {
  background-color: blue;
  opacity: 0.5;
}

Nilai opacity berkisar dari 0 (transparan total) sampai 1 (tidak transparan). Tapi hati-hati ya, kalau kamu pakai opacity, semua isi di dalam elemen juga bakal ikut transparan (termasuk teks dan gambar di dalamnya).

Contoh menggunakan internal CSS:


<!DOCTYPE html>
<html>
<head>
  <style>
    .transparan {
      background-color: blue;
      opacity: 0.5;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="transparan">Teks dan background-nya ikut transparan.</div>
</body>
</html>

Hasilnya:

Contoh CSS Opacity
Gambar 10.3 : Contoh CSS Opacity

4. Transparansi dengan RGBA

Kalau kamu cuma mau bikin background-nya aja yang transparan tapi isi elemen tetap solid, mending pakai RGBA. 

div {
  background-color: rgba(255, 0, 0, 0.5);
}

Penjelasan singkat:

  • rgb = Red, Green, Blue
  • a = Alpha (tingkat transparansi, dari 0 sampai 1)

Dengan RGBA, kamu punya kontrol lebih detail soal transparansi.

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .rgba-bg {
      background-color: rgba(255, 0, 0, 0.5);
      color: black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="rgba-bg">Hanya background yang transparan, teks tetap solid.</div>
</body>
</html>

Hasilnya:

Contoh CSS Background Color RGBA
Gambar 10.4 : Contoh CSS Background Color RGBA

5. Tabel: Properti background-color CSS

Properti CSS Keterangan Contoh
background-color Memberikan warna pada latar belakang elemen background-color: red;
Nilai nama warna Menggunakan nama warna umum background-color: blue;
Nilai heksadesimal Kode warna hex (sering dipakai di desain) background-color: #00ff00;
Nilai RGB Menentukan warna dengan angka Red, Green, Blue background-color: rgb(0,0,255);
Nilai RGBA Sama seperti RGB tapi dengan tambahan transparansi background-color: rgba(0,0,255,0.3);
transparent Bikin latar belakang jadi transparan background-color: transparent;

Penutup

CSS background itu kelihatannya sepele, tapi punya banyak trik yang bisa bikin tampilan website kamu makin keren. Cukup mainin kombinasi warna dan transparansi, hasilnya bisa jauh lebih menarik!

Kalau kamu lagi ngedesain halaman web, jangan lupa eksplorasi berbagai properti CSS lainnya juga ya. Selamat ngoding!

Posting Komentar untuk "Mengenal CSS Backgrounds: Dari Warna sampai Transparansi (Tutorial CSS Part 10)"