CSS Opacity: Elemen Transparan, Background dan Efek Fade

Apa fungsi opacity

opacity mengatur seberapa tembus pandang sebuah elemen: 1 berarti padat (default), 0 berarti tidak terlihat, dan nilai apa pun di antaranya membuat latar di belakangnya terlihat. Kotak-kotak di bawah berada di atas latar bergaris supaya kamu bisa melihatnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

Kotak terakhir masih ada: kotak itu tetap memakai slot 90px-nya di baris, hanya saja tidak menggambar apa pun. Perhatikan bahwa angka putihnya ikut memudar bersama kotaknya. opacity berlaku untuk elemen dan semua isinya.

Background transparan, teks tetap padat

Karena opacity ikut memudarkan child, property ini adalah alat yang salah untuk "background tembus pandang di belakang teks yang mudah dibaca". Pakai warna background dengan channel alpha:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Kedua panel putih membuat garis-garisnya terlihat dengan kadar yang sama. Di panel pertama, teksnya ikut memudar bersama panel. Di panel kedua, hanya warna background-nya yang transparan (rgb(255 255 255 / 0.6), sama dengan rgba(255, 255, 255, 0.6)), jadi teksnya tetap padat dan mudah dibaca. Warna dengan alpha dibahas di halaman colors.

Child tidak bisa lepas dari opacity elemen induknya: opacity: 1 pada child tidak berpengaruh apa-apa, karena elemen induk digambar sebagai satu lapisan pudar dengan child yang sudah ada di dalamnya.

Nilai

Secara visual opacity ikut diwariskan, tetapi tidak sebagai property: opacity hasil hitungan pada child tetap 1, sementara child itu digambar di dalam elemen induk yang pudar.

opacity: 0 vs visibility: hidden vs display: none

Ketiganya membuat elemen menghilang, tetapi berbeda dalam semua hal lainnya:

Perbedaan yang sering menjebak ada di baris kedua. Tombol dengan opacity: 0 masih bisa diklik dan dicapai dengan Tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

Hasil pembacaannya menanyakan ke browser elemen mana yang berada di bawah sebuah titik di dalam setiap tombol tersembunyi. Tombol opacity: 0 menjawab "clickable", sedangkan tombol visibility: hidden tidak. Tombol Visible dimulai setelah dua slot kosong selebar 150px, karena tombol display: none adalah satu-satunya yang mengembalikan ruangnya. Untuk memudarkan sesuatu lalu menghilangkannya, animasikan opacity lalu atur visibility: hidden di akhir.

Fade saat hover

opacity adalah salah satu property yang paling ringan untuk dianimasikan, jadi property ini menjadi cara standar untuk memunculkan dan menghilangkan sesuatu secara perlahan. Contohnya, keterangan yang muncul di atas gambar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within juga menampilkan keterangan itu untuk pengguna keyboard. Ingat tabel di atas: saat tidak terlihat, keterangan itu tetap dibaca oleh screen reader, dan memang itulah yang kamu inginkan untuk sebuah keterangan gambar.

Aksesibilitas: teks yang pudar kehilangan kontras

Menurunkan opacity berarti menurunkan kontras. Teks abu-abu di atas putih dengan opacity: 0.5 bisa turun jauh di bawah rasio 4,5:1 yang dibutuhkan teks paragraf. Untuk teks sekunder, pilih warna yang lolos uji kontras, jangan memudarkan warna gelap. Untuk kontrol yang dinonaktifkan, opacity yang diturunkan adalah tanda yang umum, tetapi pasangkan dengan atribut disabled supaya kontrol itu juga tidak bisa dicapai dengan keyboard dan diumumkan sebagai nonaktif.

Efek samping: stacking context

Setiap opacity di bawah 1 membuat stacking context baru, sama seperti transform. Child dengan z-index tinggi kemudian hanya bertumpuk di dalam elemen yang pudar itu dan tidak bisa naik di atas elemen di luarnya. Kalau dropdown di dalam panel yang pudar meluncur ke bawah elemen lain, inilah penyebabnya (halaman z-index menjelaskan cara kerja penumpukan).

Kesalahan yang sering terjadi

• Memudarkan kartu supaya background-nya transparan. Teksnya ikut memudar. Pakai rgb(... / 0.5) pada background.
• Mencoba membuat child kembali tidak transparan. Opacity elemen induk membatasi setiap child.
• Menyembunyikan hanya dengan opacity: 0. Elemennya masih menerima klik dan fokus. Tambahkan visibility: hidden, atau pakai display: none (pointer-events: none menghentikan klik, tetapi tidak menghentikan fokus keyboard).
• Menulis opacity: 50. Opacity bernilai 0 sampai 1, jadi 50 dibatasi menjadi 1. Tulis 0.5 atau 50%.
• Teks dengan kontras rendah karena opacity. Periksa kontras hasil akhirnya, bukan kontras warna aslinya.