Kelegapan - Trik CSS | CSS Almanac 2025

The opacityharta di CSS menentukan cara telus unsur adalah.

Penggunaan asas:

div ( opacity: 0.5; )

Kelegapan mempunyai nilai awal lalai 1 (legap 100%). Kelegapan tidak diwarisi, tetapi kerana ibu bapa mempunyai kelegapan yang berlaku untuk semua yang ada di dalamnya. Anda tidak boleh menjadikan elemen anak kurang telus daripada ibu bapa, tanpa tipu muslihat. Nilai adalah nombor dari 0 hingga 1 yang mewakili kelegapan saluran (saluran "alpha"). Apabila elemen mempunyai nilai 0 elemen itu tidak dapat dilihat sepenuhnya; nilai 1 benar-benar legap (pepejal).

Lihat Pen ini!

Keserasian IE

Sekiranya anda mahu kelegapan berfungsi dalam semua versi IE, pesanannya adalah seperti 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; )

Sekiranya anda tidak menggunakan pesanan ini, IE8-as-IE7 tidak menggunakan kelegapan, walaupun IE8 dan IE7 murni.

Catatan mengenai Menyusun Konteks

Sekiranya elemen dengan opacitydan nilai kurang dari 1 diposisikan, z-indexharta itu berlaku seperti yang dijelaskan dalam CSS2.1, kecuali autonilai tersebut dianggap sebagai 0 kerana konteks susun baru selalu dibuat.

Kelegapan boleh digunakan sebagai alternatif kepada visibilityharta tanah: visibility: hidden;sama seperti opacity: 0;.