Opaklık - CSS Hileleri | CSS Almanak 2024

CSS'deki opacityözellik, bir öğenin ne kadar şeffaf olduğunu belirtir.

Temel kullanım:

div ( opacity: 0.5; )

Opaklığın varsayılan başlangıç değeri 1'dir (% 100 opak). Opaklık miras alınmaz, çünkü ebeveynin içindeki her şeye uygulanan opaklığı vardır. Bazı hileler olmadan bir alt öğeyi üst öğeden daha az şeffaf yapamazsınız. Değerler, kanalın ("alfa" kanalı) opaklığını temsil eden 0 ile 1 arasında bir sayıdır. Bir eleman 0 değerine sahip olduğunda, eleman tamamen görünmezdir; 1 değeri tamamen opaktır (katı).

Bu Kaleme bakın!

IE Uyumluluğu

Opaklığın tüm IE sürümlerinde çalışmasını istiyorsanız, sıra aşağıdaki gibi olmalıdır:

.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; )

Bu sırayı kullanmazsanız, IE8 ve IE7 gibi IE8 opaklığı uygulamaz.

Yığınlama Bağlamlarına İlişkin Not

opacity1'den küçük bir değere sahip bir eleman konumlandırılırsa, z-indexözellik CSS2.1'de açıklandığı gibi uygulanır, ancak autoyeni bir yığın bağlamı her zaman oluşturulduğundan değer 0 olarak kabul edilir.

Opaklık visibilityözelliğe alternatif olarak kullanılabilir : visibility: hidden;aynen opacity: 0;.