I'm working with a div that has a css property of background: rgba(0, 0, 0, 0.85);. In the center of this div is the title of the page. I want to achieve a see-through effect for the title (knockout, punch-through, whatever term you prefer - essentially allowing the background image of the page to show through the black background of the div). My current method involves using an image with the div's background and transparent text, divided into blocks.
/////////////////////////////////////////////// // (empty) // TITLE IMAGE // (empty) // ///////////////////////////////////////////////
The challenge I'm facing is how to create the empty divs in a way that keeps the centered image intact (the empty divs are necessary to add the black background). Is there another approach to achieving see-through text without encountering this issue? Or is there a method to center the image div alongside the empty divs?
EDIT: To see an example of the desired effect, check out: