javascript - 如何在反应项目中使用“INLINE CSS”更改背景图像的不透明度而不影响图像上的文本

Question

我正在尝试使用内联 css 在屏幕上渲染地图和地图上的一些文本，我想降低图像的不透明度，使文本变得更具可读性

<div
          
          style={{
            backgroundImage: `url(${country.countryInfo.flag})`,
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
          }}
        >
          <div></div>
          <div>{country.country}</div>
          <div>Cases:{numeral(country.cases).format('0,0')}</div>
          <div>Recovered:{numeral(country.recovered).format('0,0')}</div>
          <div>Deaths:{numeral(country.deaths).format('0,0')}</div>
          <div>Sagar Bhatia</div>
        </div>

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

标签： javascripthtmlcssreactjs