Why don’t you pass the header (assumming You only need the header to be transparent),
opacity: .5;
/* Or, */
background-color: rgba(0, 0, 0, .5);
You might need to add some shadows and so on stuff to give that thing a transparent feel.
Solution 1 :
Problem :
Working template of the site: https://codesandbox.io/s/blue-currying-3me1t
my <h1> and <h2> elements in Header.js have the background-color: #000000; property set. When the particles pass through the area that the headers are in, they are completely obscured by this background color.
How do I make the background color of the headers transparent? I want to be able to see the particles passing through the region as to maintain context.
The intended effect looks like the image below although I am trying to maintain the area in between the two headers being blur free.
Comments
Comment posted by Quentin Grisel
background-color: rgba(0, 0, 0, 0.8); Should do what you want