Krycie - CSS-Tricks | Almanach CSS 2025

opacityNieruchomość w CSS określa sposób przezroczysty element jest.

Podstawowe zastosowanie:

div ( opacity: 0.5; )

Krycie ma domyślną wartość początkową 1 (nieprzezroczystość 100%). Krycie nie jest dziedziczone, ale dlatego, że rodzic ma krycie, które ma zastosowanie do wszystkiego, co się w nim znajduje. Nie możesz uczynić elementu potomnego mniej przezroczystym niż element nadrzędny bez pewnych sztuczek. Wartości to liczby od 0 do 1 reprezentujące krycie kanału (kanał „alfa”). Gdy element ma wartość 0, element jest całkowicie niewidoczny; wartość 1 jest całkowicie nieprzezroczysta (jednolita).

Sprawdź ten długopis!

Zgodność z IE

Jeśli chcesz, aby krycie działało we wszystkich wersjach IE, kolejność powinna być następująca:

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

Jeśli nie używasz tej kolejności, IE8-as-IE7 nie zastosuje krycia, chociaż IE8 i czysty IE7 tak.

Uwaga na temat kontekstów zestawiania

Jeśli opacitypozycjonowany jest element z wartością mniejszą niż 1, z-indexwłaściwość ma zastosowanie zgodnie z opisem w CSS2.1, z wyjątkiem tego, że autowartość jest traktowana jako 0, ponieważ zawsze tworzony jest nowy kontekst stosu.

Krycie może być używane jako alternatywa dla visibilitywłaściwości: visibility: hidden;jest jak opacity: 0;.