Create a transparent backdrop over figure

Question

I have a page which I need to have a figure as a background. However, under certain circumstances I want some text over that background along with a backdrop (a light gray but transparent cover over the figure).

As it stands, I managed to get the text as I want it, but cannot get that backdrop. Here is a sample app I have of how it's working. Basically all I want is that transparent backdrop over the image.

const App = () => {

  return (
    <div>
            <figure style={{
                position: 'fixed',
                top: 0,
                left: 0,
                backgroundImage: `url(https://placekitten.com/1000/1000)`,
                backgroundSize: 'fit',
                backgroundPosition: 'top',
                width: '100%',
                height: '100%',
                margin: 0
            }}></figure>
      <div style={{  width: '100%', width: 'height%', backgroundColor: 'red'}}>
        <div style={{
            position: 'absolute',
                      top: '50%',
                      left: '50%',
                      transform: 'translate(-50%, -50%)',
                      width: '412px',
            color: 'white'
          }}>
            <h1>Div content</h1>
            <p>Would like to add a backdrop over the parent div</p>
            <p>Make the background a light gray over the image</p>
            <p>As it stands, any background related color I put on this div does not work. (see the backgroundColor set to red on one of the parent divs</p>

        </div>
      </div>

    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

Try something like this. I changed this line in your code:

 <div style={{  width: '100%', height: '100%', backgroundColor: 'red', position: 'absolute', opacity: '20%'}}> </div>

const App = () => {

  return (
  
    <div>
            <figure style={{
                position: 'fixed',
                top: 0,
                left: 0,
                backgroundImage: `url(https://placekitten.com/1000/1000)`,
                backgroundSize: 'fit',
                backgroundPosition: 'top',
                width: '100%',
                height: '100%',
                margin: 0
            }}></figure>
      <div style={{  width: '100%', height: '100%', backgroundColor: 'red', position: 'absolute', opacity: '20%'}}> </div>
        <div style={{
            position: 'absolute',
                      top: '50%',
                      left: '50%',
                      transform: 'translate(-50%, -50%)',
                      width: '412px',
            color: 'white'
          }}>
            <h1>Div content</h1>
            <p>Would like to add a backdrop over the parent div</p>
            <p>Make the background a light gray over the image</p>
            <p>As it stands, any background related color I put on this div does not work. (see the backgroundColor set to red on one of the parent divs</p>

        
      </div>

    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>