Tekstkleur aanpassen aan achtergrond met gebruik van mix-blend-mode

2017-10-05

Met behulp van de eigenschap mix-blend-mode wordt de kleur van tekst en/of achtergrond aangepast aan de kleuren van eronder zittende elementen. Deze browser ondersteunt mix-blend-mode niet. In deze browser is de kleur van de tekst daarom (doorzichtig) effen, eventueel op een (doorschijnend) witte achtergrond. De onder de voorbeelden staande tekst geldt dus niet voor deze browser!

Onder andere alle versies van Firefox, Google Chrome, Safari en Samsung Internet ondersteunen mix-blend-mode. Als je dit voorbeeld in één van deze browsers bekijkt, ziet alles eruit, zoals het is bedoeld.

Sponsgooien op Koninginnedag 2008 Vondelpark Amsterdam

Sponsgooien op Koninginnedag 2008 Vondelpark Amsterdam

Hierboven staan twee dezelfde foto's, met boven beide dezelfde tekst 'Koninginnedag 2008 Vondelpark'. De tekst boven de eerste foto is gekleurd met behulp van mix-blend-mode en daardoor goed leesbaar. De tekst boven de tweede foto is gewoon zwart en heeft een doorzichtige witte achtergrond gekregen, zodat deze leesbaar is. De tekst die is gekleurd met mix-blend-mode is echter veel beter leesbaar, omdat de tekstkleur zich aanpast aan de achtergrondkleur.

Hierboven staat vier keer het woord 'Raster' boven een achtergrond-afbeelding. Door het gebruik van verschillende waarden bij mix-blend-mode, achtergrondkleur en kleur mengt de tekst zich op verschillende manieren met de achtergrond.

Hierboven staan vier groepjes van zeven over elkaar heen staande cirkels. Elke cirkel is eigenlijk gewoon een sterk vergrote letter 'o', gewone tekst dus. Het eerste en tweede groepje hebben een witte achtergrond, het derde en vierde een rode. Bij het eerste en derde groepje wordt mix-blend-mode gebruikt, bij het tweede en vierde groepje opacity. Zonder mix-blend-mode en opacity zien de vier groepjes cirkels er precies hetzelfde uit. Hierdoor is duidelijk te zien dat mix-blend-mode heel andere kleuren oplevert, dan wanneer je iets simpelweg doorzichtig maakt met opacity.