在人物上创建透明背景

Question

我有一个页面需要有一个图形作为背景。但是，在某些情况下，我想要在该背景上放置一些文本以及背景（图形上的浅灰色但透明的覆盖物）。

就目前情况而言，我设法获得了我想要的文本，但无法获得背景。这是我的一个示例应用程序，展示了它的工作原理。基本上我想要的只是图像上的透明背景。

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

尝试这样的事情。我在你的代码中更改了这一行：&nbsp;<div style={{&nbsp; width: '100%', height: '100%', backgroundColor: 'red', position: 'absolute', opacity: '20%'}}> </div>const App = () => {&nbsp; return (&nbsp;&nbsp;&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <figure style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 'fixed',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundImage: `url(https://placekitten.com/1000/1000)`,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundSize: 'fit',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundPosition: 'top',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: '100%',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: '100%',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}></figure>&nbsp; &nbsp; &nbsp; <div style={{&nbsp; width: '100%', height: '100%', backgroundColor: 'red', position: 'absolute', opacity: '20%'}}> </div>&nbsp; &nbsp; &nbsp; &nbsp; <div style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: 'absolute',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: '50%',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: '50%',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: 'translate(-50%, -50%)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: '412px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: 'white'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Div content</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Would like to add a backdrop over the parent div</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Make the background a light gray over the image</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; )}ReactDOM.render(&nbsp; &nbsp; <App />,&nbsp; &nbsp; 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>