Opacity

Från Webbling
Version från den 20 augusti 2015 kl. 22.23 av PGJ (diskussion | bidrag)
Hoppa till: navigering, sök

opacity används för att ange hur genomskinligt innehållet i ett element ska vara. Som parameter anges ett alfavärde, dvs hur genomskinligt innehållet ska vara.

Alfavärdet kan vara ifrån 0.0 till 1.0, där noll är helt genomskinlig (dvs, elementet blir osynligt) och ett inte är helt ogenomskinlig. Följdaktligen är 0.5 det samma som att innehållet ska vara halvgenomskinligt.

Lägg märke till att allt innehåll kommer att bli genomskinligt. Det går inte att undanta något underliggande innehåll ifrån opacity, t.ex. för att göra det ogenomskinligt. Så sätter man opacity: 1 på ett underliggande element, kommer inte det 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 få ett alfavärde på 0.25 (hälften av hälften alltså).

Defaultvärdet är 1, dvs ogenomskinlig.

Exempel

Här gör vi ett element halvgenomskinligt.

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

Lägg märke till att allt innehåll i elementet, inklusive alla underelement, får samma genomskinlighet. 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 i CSS Color Module Level 3

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