Opacity - Trik CSS | CSS Almanak 2024

The opacityproperti di CSS menentukan berapa transparan unsur adalah.

Penggunaan dasar:

div ( opacity: 0.5; )

Opasitas memiliki nilai awal default 1 (100% buram). Opasitas tidak diwariskan, tetapi karena induk memiliki opasitas yang berlaku untuk semua yang ada di dalamnya. Anda tidak dapat membuat elemen anak kurang transparan dibandingkan induknya, tanpa tipu muslihat. Nilai adalah angka dari 0 hingga 1 yang mewakili opasitas saluran (saluran "alfa"). Ketika sebuah elemen memiliki nilai 0, elemen tersebut benar-benar tidak terlihat; nilai 1 benar-benar tidak tembus cahaya (solid).

Lihat Pena ini!

Kompatibilitas IE

Jika Anda ingin opasitas berfungsi di semua versi IE, urutannya harus sebagai berikut:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Jika Anda tidak menggunakan urutan ini, IE8-as-IE7 tidak menerapkan opasitas, meskipun IE8 dan IE7 murni melakukannya.

Catatan tentang Stacking Contexts

Jika elemen dengan opacitydan nilai kurang dari 1 diposisikan, z-indexproperti tersebut berlaku seperti yang dijelaskan di CSS2.1, kecuali autonilai tersebut diperlakukan sebagai 0 karena konteks susunan baru selalu dibuat.

Opacity dapat digunakan sebagai alternatif dari visibilityproperti: visibility: hidden;is just like opacity: 0;.