Properti opacity digunakan untuk mengontrol tingkat transparansi suatu elemen. Menggunakan properti ini, Anda dapat mengatur elemen agar sepenuhnya transparan, sepenuhnya buram (default), atau tembus.

Dibutuhkan nilai <number> yang menentukan tingkat transparansi elemen. Angka tersebut berkisar antara 0 dan 1. Nilai 1 adalah nilai default, dan membuat elemen tersebut sepenuhnya buram. Nilai 0 membuat elemen sepenuhnya transparan sehingga Anda tidak dapat melihatnya lagi. Nilai antara 0 dan 1 membuatnya transparan (atau semi-transparan).

Semakin rendah nilainya dari 1 menjadi 0 semakin transparan elemen menjadi, dan semakin Anda bisa melihat latar belakang atau elemen yang ada di belakang / di bawahnya.

Properti opacity menerapkan opacity yang ditentukan ke elemen secara keseluruhan, termasuk kontennya, daripada menerapkannya ke setiap keturunan secara individual. Ini berarti bahwa, bahkan jika properti opacity tidak mengalir (tidak diwarisi secara default), keturunan elemen akan mendapatkan opacity yang sama dengan elemen induknya. Tidak ada cara untuk memaksa keturunan elemen menjadi kurang transparan daripada induknya.

Trivia & Catatan

Properti opacity memiliki efek yang sama dengan properti visibilitas dalam hal itu dapat membuat elemen sepenuhnya transparan (tidak terlihat) tanpa mempengaruhi tata letak — elemen transparan masih memakan ruang pada tata letak seolah-olah itu terlihat.

Jika opacity memiliki nilai kurang dari 1, elemen membentuk konteks susun untuk anak-anaknya. Ini berarti bahwa setiap konten di luarnya tidak dapat berlapis-lapis antara potongan-potongan konten di dalamnya, dan sebaliknya. Lihat entri properti indeks-z untuk detail dan penjelasan.

Properti opacity dapat digunakan untuk membuat efek fade-in / fade-out dengan CSS. Lihat bagian demo di bawah ini untuk contoh langsung.
Kinerja opacity

Opacity adalah salah satu dari beberapa properti CSS yang dapat dipercepat dengan baik karena GPU dapat memanipulasinya dengan mudah.

Pada dasarnya, setiap lapisan di mana Anda ingin memudar opacity melalui transisi atau animasi CSS, browser sebenarnya cukup pintar untuk melemparkannya ke GPU dan melakukan manipulasi di sana dan itu akan sangat cepat.

Dari semua hal CSS, opacity adalah salah satu yang paling performan dan Kalian tidak akan mengalami masalah dalam menggunakannya.

opacity: <number>

Values

<number>

Semua <nomor> antara 0 dan 1 disertakan.

Nilai 0 akan membuat elemen sepenuhnya transparan (tidak terlihat). Nilai 1 akan membuat elemen sepenuhnya buram (nilai default). Setiap angka antara 0 dan 1 akan membuat elemen tersebut tembus cahaya (semi-transparan), dan setiap latar belakang dan elemen di baliknya / di bawahnya akan terlihat.

Contoh

Berikut ini membuat gambar tembus, dan kemudian menjiwai menjadi sepenuhnya buram pada hover, menggunakan CSS Transition, menciptakan efek fade-in yang halus.

img {
    opacity: 0.3;
    transition: opacity .6s;
}

img:hover {
    opacity: 1;
}