Ik kreeg een interessante vraag van Gerard, één van de cursisten van mijn HTML/CSS cursus.
Gerard had een doorzichtig blok gemaakt op zijn website met de CSS eigenschap opacity. In dit blok had hij tekst geplaatst. Nu werd deze tekst niet duidelijk getoond, omdat de doorzichtigheid (opacity) ook doorgevoerd werd op de tekst.
Gerard zijn vraag was nu: hoe krijg ik duidelijke tekst op een doorzichtig blok.
Opacity wordt doorgegeven aan kind elementen
Wanneer je een HTML element de eigenschap opacity geeft via CSS, dan wordt dit ook doorgegeven aan kind elementen.
Dit is de reden waarom tekst in een doorzichtig blok ook doorzichtig wordt. Hierdoor wordt de tekst vager en dus moeilijker te lezen.
Om de tekst wel duidelijk te krijgen, moet je er voor zorgen dat deze tekst geen kind element is van het blok dat doorzichtig is.
De positie van de tekst
Alleen, als je de tekst uit het blok haalt, dan komt de tekst onder het blok te staan. Terwijl juist de bedoeling is dat de tekst wel in het blok komt te staan.
Je kunt dit oplossen door het blok met de tekst met behulp van de CSS eigenschap position op de juiste plek te zetten.
In de onderstaande video zie je precies hoe je dit doet: