Opacity adalah tingkat kejelasan dari suatu elemen. Opacity: 0 menunjukkan tingkat paling rendah dimana elemen yang bersangkutan menjadi tidak terlihat dan opacity: 1 menunjukkan tingkat paling tinggi dimana objek yang dimaksud tampak sangat jelas. Opacity: 1 adalah nilai default dari sebuah elemen.
Opacity juga digunakan untuk transparansi objek. Dimana semakin kecil nilai opacity maka semakin transparan elemen tersebut. Begitu pun sebaliknya
Lihat juga penggunaan animation-timing-function ini pada pembuatan animasi fade-in dan juga animasi pindah tempat
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 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:
Values
Semua 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.
ContohBerikut ini membuat gambar tembus, dan kemudian menjiwai menjadi sepenuhnya buram pada hover, menggunakan CSS Transition, menciptakan efek fade-in yang halus.
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
Example explained
The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.
When the mouse pointer moves away from the image, the image will be transparent again.
An example of reversed hover effect:
Transparent Box
When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:
Transparency using RGBA
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel [RGBA] - which specifies the opacity for a color.
An RGBA color value is specified with: rgba[red, green, blue, alpha]. The alpha parameter is a number between 0.0 [fully transparent] and 1.0 [fully opaque].