在人物上创建透明背景

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

尝试这样的事情。我在你的代码中更改了这一行：

 <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>