RGBa: Transparante achtergond maar niet de tekst

Hoe doe ik dat? Een stukje tekst met een achtergrond waarbij je de background deels ziet. En dit zonder dat de tekst zelf deels transparant is.

Vermijd daarom het gebruik van de style “opacity” want dan wordt het gehele object inclusief de inhoud deels transparant. Gebruik RGBa om de kleur van een object te bepalen zonder invloed uit te oefenen op andere elementen in een object.

RGBa staat voor Red, Green, Blue en Alpha. De RGB waarden gaan van 0 tot 255 en bepalen het kleur. De alpha-waarde van 0 (0% opacity) tot 1 (100% opacity) bepaalt de opaciteit, de lichtondoorlatendheid, van een object.

Je kan ook HSLa gebruiken: Hue, Saturation, Lightness en Alpha. Daarin ben je vrij zolang je maar een gebruikt waarbij een alpha waarde wordt meegegeven.

Voorbeeldje:

spider_flower_spirit_frost_3.jpg

Spider Flowers bloom all summer long – so I’ll keep an eye out for more varieties next summer in local gardens.