Непрозирност - ЦСС-трикови

Anonim

opacityИмовина у ЦСС одређује како транспарентна елемент је.

Основна употреба:

div ( opacity: 0.5; )

Непрозирност има подразумевану почетну вредност 1 (100% непрозирно). Непрозирност се не наслеђује, већ зато што родитељ има непрозирност која се односи на све у њему. Не можете подређени елемент учинити мање транспарентним од родитељског, без неких трикова. Вредности су број од 0 до 1 који представља непрозирност канала („алфа“ канал). Када елемент има вредност 0, елемент је потпуно невидљив; вредност 1 је потпуно непрозирна (чврста).

Погледајте ову оловку!

ИЕ компатибилност

Ако желите да непрозирност функционише у свим верзијама ИЕ, редослед би требао бити следећи:

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

Ако не користите ову наредбу, ИЕ8-ас-ИЕ7 не примењује непрозирност, мада ИЕ8 и чисти ИЕ7 то чине.

Напомена о слагању контекста

Ако opacityје позициониран елемент са и вредношћу мањом од 1, z-indexсвојство се примењује како је описано у ЦСС2.1, осим што се autoвредност третира као 0 јер се увек креира нови контекст слагања.

Непрозирност се може користити као алтернатива visibilityсвојству: visibility: hidden;управо је попут opacity: 0;.

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
24+ 5.1+ 19+ 12.1+ 9+ 2.1+ 3.2+