如何在另一个之上使用背景颜色和背景图像答案

【问题标题】：How to use backgroundColor and backgroundImage one on top of another如何在另一个之上使用背景颜色和背景图像
【发布时间】：2022-02-18 21:52:35
【问题描述】：

我正在使用带有材质 UI 的 react/typescript。我想同时使用背景图像和背景颜色，就像颜色透明一样。这是我的代码 sn-p：

 return (
//Todo need to do one more level of refactor   
  <div style={{ flex: 1, backgroundImage: `url("https://Content/images/backgrounds/91.jpg")`, backgroundSize: "cover", height: "100vh", zIndex: 2 }}>
  <Grid
    direction="column"
    alignItems="center"
    container
    justifyContent="center"
    sx={{height: "100vh", backgroundColor: 'rgba(0,0,235,0.3)', color:'white', zIndex: -1}}>
    <Grid item>
      <Paper>

但这里只显示颜色，它应该是显示图像也同时透明。请帮忙，谢谢。

【问题讨论】：

标签： css reactjs typescript

【解决方案1】：

您可以使用背景图像和线性渐变来做到这一点，如下所示：

return (
//Todo need to do one more level of refactor   
  <div style={{ flex: 1, background: `linear-gradient(rgba(0,0,235,0.3), rgba(0,0,235,0.3)), url("https://Content/images/backgrounds/91.jpg")`, backgroundSize: "cover", height: "100vh", zIndex: 2 }}>
  <Grid
    direction="column"
    alignItems="center"
    container
    justifyContent="center"
    <Grid item>
      <Paper>

【讨论】：

感谢@yousoumar 它的工作