Opasitas dan Transparansi RGBA

Properti opacity mengatur transparansi seluruh elemen, termasuk elemen anak dan kontennya. Nilainya berkisar dari 0 (sepenuhnya transparan) hingga 1 (sepenuhnya buram).

Hal penting yang perlu diperhatikan: opacity memengaruhi seluruh pohon elemen. Teks, gambar, dan elemen anak di dalam elemen dengan opacity: 0.5 semuanya menjadi 50% transparan — Anda tidak dapat membuat elemen anak lebih buram daripada induknya.

Untuk membuat hanya warna latar belakang yang transparan tanpa memengaruhi teks atau elemen anak, gunakan rgba(), bukan opacity:

Gunakan model mental berikut:

• opacity: 0.5 — seluruh elemen dan elemen anaknya menjadi transparan
• rgba(r,g,b,0.5) — hanya nilai warnanya yang transparan; elemen anak tidak terpengaruh

Prinsip yang sama berlaku untuk hsla(). Argumen keempat adalah saluran alfa (0–1):

CSS modern memungkinkan penggunaan pemisah garis miring untuk alfa pada rgb() dan hsl() tanpa varian "a":

Ketiganya menyembunyikan elemen, tetapi dengan cara yang berbeda:

• opacity: 0 — tidak terlihat, tetapi tetap mengambil ruang dan dapat diklik
• visibility: hidden — tidak terlihat, tetap mengambil ruang, dan tidak dapat diklik
• display: none — sepenuhnya dihapus dari tata letak

Karena opacity dikomposisikan oleh GPU, properti ini merupakan salah satu properti CSS yang paling ringan untuk dianimasikan. Efek muncul dan menghilang bertahap sebaiknya selalu menggunakan transisi opacity, bukan background-color.

Untuk memberikan latar belakang tembus pandang pada elemen sekaligus menjaga teks tetap mudah dibaca, gunakan rgba() pada background-color:

Gunakan RGBA pada border-color dan box-shadow untuk membuat efek transparan yang halus:

Teks dengan opasitas rendah mengurangi keterbacaan dan mungkin tidak memenuhi persyaratan kontras warna WCAG. Selalu periksa rasio kontras saat menggunakan transparansi pada teks. Pastikan rasionya minimal 4.5:1 untuk teks normal.

opacity membuat seluruh elemen dan elemen anaknya menjadi transparan. Gunakan rgba() atau hsla() untuk membuat warna transparan tanpa memengaruhi elemen anak. Transisi opacity dipercepat oleh GPU dan memiliki kinerja yang baik. Selalu periksa rasio kontras saat menggunakan transparansi pada teks.