Opacity
opacity används för att ange hur transparent/genomskinligt innehållet i ett element ska vara. Som parameter anges ett alfavärde. Alfavärdet kan vara ifrån 0.0 till 1.0, där noll är helt transparent (dvs, elementet blir osynligt) och ett är helt synlig/ogenomskinlig. Följaktligen är 0.5 det samma som att innehållet ska vara halvgenomskinligt.
Lägg märke till att allt innehåll i ett opacity-element kommer att påverkas av alfavärdet. Det går inte att undanta något underliggande innehåll och göra det mindre transparent än övrigt innehåll. Så sätter man opacity: 1 på ett underliggande element, kommer det inte att bli ogenomskinligt. Däremot kan man sätta ner genomskinligheten ytterligare i underelement. Låt oss säga att toppelementet har opacity: 0.5; och ett underelement även det har opacity: 0.5;. Då kommer underelementet att visas som det skulle ha ett alfavärde på 0.25 (hälften av hälften alltså), dvs det blir ännu mer transparent.
Egenskaper
| Parametrar | <alfavärde> | inherit
|
| Defaultvärde | 1.0, dvs helt ogenomskinlig |
| Ärvs? | Nej |
| Animerbart? | Ja |
| Fungerar med... | Alla element |
Alfavärdet kan vara mellan 0.0 och 1.0. Högre eller lägre värden, sätts till närmaste gräns.
Exempel
I exemplet gör vi header-elementet halvgenomskinligt. Lägg märke till att allt innehåll i elementet, inklusive alla underelement, får samma transparens. Det andra stycket i demon har ytterligare transparens.
Vill man t.ex. ha enbart bakgrunden halvgenomskinlig (men inte övrigt innehåll) är det antagligen bättre att använda sig av background-color och sätta en bakgrundsfärg med ett alfavärde. Se färger för mer information om detta.