Opacitatea

Crearea de elemente transparente in CSS este de fapt destul de simpla.

Urmatorul cod aplica tuturor imaginilor o opacitate de 50:

img{
    opacity: 0.5;
    filter: alpha(opacity=50); /* Pentru IE8 si versiunile mai vechi */
}

In IE9, Firefox, Chrome, opera si Safari puteti folosi opacity fara probleme, insa in IE8 si versiunile mai vechi va trebuii sa folositi si filter. Aceasta proprietate, opacity, poate avea o valoare de intre 0.0 si 1.0, cu cat valoarea este mai mica cu atat opacitatea este mai mare.IE8 si versiunile mai vechi folosesc proprietatea filter care poate avea o valoare intre 0 si 100.

In exemplul urmator imaginile sunt transparente tot timpul, mai putin atunci cand un cusror este pus deasupra:

img{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

img:hover{
    opacity: 1.0;
    filter: alpha(opacity=100);
}