Opacity

Från Webbling
Hoppa till: navigering, sök

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.

See the Pen ZGdabE by Patrik Grip-Jansson (@PGJ) on CodePen.

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.

Egenskapens definition

http://www.w3.org/TR/css3-color/#transparency