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.

 

Par Hasard

Ik ben 30+, nader de 40 zelfs, met een gezonde internet verslaving. Gelukkig getrouwd en fiere vader van 2 dochters. Wil een kat in huis, maar mag niet. 🙁

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *