Ondoorzichtigheid - CSS-trucs

De opacityeigenschap in CSS geeft aan hoe transparant een element is.

Basis gebruik:

div ( opacity: 0.5; )

Ondoorzichtigheid heeft een standaard beginwaarde van 1 (100% ondoorzichtig). Ondoorzichtigheid wordt niet overgeërfd, maar omdat de ouder ondoorzichtigheid heeft die van toepassing is op alles erin. Je kunt een kindelement niet minder transparant maken dan het ouder, zonder enige bedrog. Waarden zijn een getal van 0 tot 1 dat de ondoorzichtigheid van het kanaal (het "alfakanaal") vertegenwoordigt. Als een element de waarde 0 heeft, is het volledig onzichtbaar; een waarde van 1 is volledig ondoorzichtig (vast).

Kijk eens naar deze pen!

IE-compatibiliteit

Als u wilt dat dekking werkt in alle versies van IE, moet de volgorde als volgt zijn:

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

Als u deze volgorde niet gebruikt, past IE8-as-IE7 de dekking niet toe, hoewel IE8 en een pure IE7 dat wel doen.

Opmerking over stapelcontexten

Als een element met opacityen een waarde kleiner dan 1 wordt gepositioneerd, is de z-indexeigenschap van toepassing zoals beschreven in CSS2.1, behalve dat de autowaarde wordt behandeld als 0 aangezien er altijd een nieuwe stapelcontext wordt gemaakt.

Ondoorzichtigheid kan worden gebruikt als alternatief voor de visibilityeigenschap: visibility: hidden;is net als opacity: 0;.