Solution 1 :

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.

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.

example

Comments

Comment posted by Quentin Grisel

background-color: rgba(0, 0, 0, 0.8); Should do what you want

By

Leave a Reply

Your email address will not be published. Required fields are marked *