Gennemsigtige farver med opacity og RGBa

Det er ikke særlig længe siden, at det bedste bud var et png-billede, når jeg ville have gennemsigtige farver på min hjemmeside - også selvom Microsoft allerede omkring årtusindeskiftet med udviklingen af en række 'filtre' havde åbnet op for muligheden for at lave gennemsigtighed direkte i CSS. Du kan læse mere om filtrene på Microssoft's engelske hjemmeside.

Grunden til at det indtil for få år siden ikke har været muligt at bruge gennemsigtige farver i CSS er, at Microsoft's filtre kun kan bruges af Microsoft's egen browser Internet Explorer (IE) - først med introduktionen af 'opacity' og 'RGBa' i CSS3 er det blevet muligt at lave gennemsigtige farver i CSS, som kan bruges i alle browsere.

Denne artikel beskriver brugen af gennemsigtighed i forbindelse med farveskemaerne HEX og RGB, så måske er det en god ide at læse "Farveskemaerne HEX og RGB" om brug og farveblanding i de to farveskemaer.

'Property'en 'opacity' bruges sammen med en farve defineret i 'background' til at bestemme farvens gennemsigtighed - hvor gennemsigtig farven skal være, angives med en værdi mellem 0.0 og 1.0, hvor 0.0 er transparent og 1.0 er en dækkende farve.

Herunder en rød div med bogstavet med A

.box {
	background: red; 
}
#opacity_layer  {
	background: black;
  	opacity: 0.5;
}

Her et eksempel hvor div'en 'opacity_layer' er gennemsigtig sort, og dækker øverste halvdel af div'en 'box' som er rød - den sorte farve er halvt gennemsigtigt på grund af værdien '0.5'

Ifølge caniuse.com er 'opacity' implementeret i alle de populære browsere, så prefixes er ikke længere nødvendige.

Da 'property'en 'opacity' er CSS3, understøttes den først fra og med IE9. Til IE8 og ældre versioner kan jeg bruge Microsoft's eget 'filter' RGBA som en fuldt ud lige så god løsning - IE9 kan udover 'opacity' også bruge RGBA.

#opacity_layer  {
	background: black;
	opacity: 0.5; /* IE9 OG NYERE */ 
	filter: alpha(opacity=50);  /* IE9 OG ÆLDRE */ 
}

Et lidt mere problematisk alternativ til 'opacity' er RGBa - problematisk fordi IE9 kræver eksta kode at få til at virke sammen med RGBa, hvilket der kan læses mere om i afsnittet "Internet Explorer og ARGB-filteret".

RGBa er en sammentrækning af 'RGB' og 'alpha', hvor alpha bestemmer hvor gennemsigtig farveblandingen skal være. Læs mere om om farveskemaet RGB i artiklen "Farveskemaerne HEX og RGB"

rgba(67, 233, 22, 0.7);
 

På billedet herunder er der i toppen af en grøn div med bogstavet B tilføjet en rød div som er gennemsigtig ved hjælp af RGBa:

.box {
	background: green; 
}
#rgba_layer  {
	rgba(255, 0, 0, 0.5);
}

Farven er rød med '255' i RGB og halvt gennemsigtig på grund af værdien '0.5' sidst i talkombinationen

.box {
	background: green; 
}
#rgba_layer  {
	rgba(0, 0, 0, 0.5);
}

Her er div'en 'rgba_layer' sort på grund af farveblandingen i RGB og gennemsigtig på grund af værdien '0.5' sidst i talkombinationen

I 2014 understøtter alle populære browsere 'RGBa' - se browsersupport på caniuse.com - prefixes er derfor ikke nødvendige.

IE8 og tidligere versioner understøtter ikke RGBa, så det er nødvendigt med en alternativ løsning (fallback) til disse. Til IE8 og tidligere kan jeg bruge Microsofts eget filter ARGB, men vanskelighederne begynder i IE9 - IE9 understøtter nemlig både RGBa og ARGB, så når jeg definerer begge properties i den samme selector, går IE9 i udu! Læs om hvordan det kan løses sidst i afsnittet, hvis det er tvingende nødvendigt at bruge RGBa og ARGB fremfor 'opacity'.

ARGB-filterets primære funktion er at lave en glidende farveovergang mellem 2 forskellige farver - en start- og en slut-farve fra HEX-farveskemaet, men indsætter jeg i stedet den samme farve i både start- og slut-farven, får jeg et ensfarvet resultat. Læs mere om glidende farveovergange i artiklen "Farveovergange med gradient"

startColorstr=#FF0000, 	endColorstr=#FF0000

Ligesom i RGBa tilføjer jeg også i RGBA en ekstra værdi 'alpha', når jeg ønsker, at farveblandingen skal være gennemsigtig - i ARGB placeres alpha i begyndelsen af værdikombinationen, og består af 2 tal eller bogstaver for hvilke det gælder, at '00' er transparent og 'FF' er en dækkende farve. I øvrigt gælder de samme regler for alpha som for de 3 grundfarver - se oversigten i artiklen "Farver med HEX og RGB" i afsnittet "Blande farver i HEX".

startColorstr=#77FF0000, 	endColorstr=#77FF0000

Herunder er ARGB-fallback til IE8 og ældre versioner indsat i 'rgba_layer', som ligger placeret i øverste halvdel af den grønne div med bogstavet B:

.box {
	background: green; 
#rgba_layer  {
	rgba(255,0,0,0.5);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#77FF0000, endColorstr=#77FF0000 )";
}

Farven er rød med 'FF0000' i HEX og halvt gennemsigtig på grund af værdien '77' først i talkombinationen - alternativt kunne jeg have brugt '7F' med samme resultat

Som tidligere nævnt har IE9 problemer med at bruge både RGBa og ARGB i samme element - IE9 supporterer begge properties, og forsøger at rendere dem begge samtidigt. Resultatet bliver noget bras, så det er nødvendigt at stoppe IE9 i at bruge filteret og nøjes med RGBa alene.

IE9 kan tvinges til at se bort fra ARGB, og nøjes med kun at bruge RGBa ved at indsætte denne bid CSS:

CSS målrettet IE9 alene

#rgba_layer:not([dummy]) {  
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='false')"; 	
} 

I modsætning til RGBa er filteret ARGB baseret på farveskemaet HEX. Derfor er det nødvendigt at konvertere farven, så det er den samme farve der vises i både moderne browsere og IE8.

Konverteringen af farver samt gennemsigtighed mellem de 2 properties er en snørklet matematisk udregning, som falder lidt ved siden af målet med denne artikel, men heldigvis kan konverteringen laves hurtigt ved hjælp af et online værktøj, som kloge og hjælpsomme mennesker har stillet til rådighed.

Denne online converter af Kilian Valkhof klarer omregningen, og giver lidt ekstra info om matematikken der ligger bag.