如何为盖茨比图像添加背景渐变？

Question

我正在使用gatsby-image并尝试在图像上添加深色渐变，但效果不如预期。

这是我的代码：

 <Img
    sx={{
      height: "70vh",
      background: "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))",
    }}
    fluid={data.tos.childImageSharp.fluid}
  />

Answer 1

尝试使用Gatsby背景图片，并将不透明度添加到1！重要，就像这样

import BackgroundImage from 'gatsby-background-image';
const HeroBackgroundImage = styled(BackgroundImage)`
      width: 100%;
      height: 100vh;
      opacity: 1 !important;
      background-size: cover;
      background: linear-gradient(
        90.26deg,
        rgba(3, 113, 227, 0.9) 17.75%,
        rgba(238, 169, 64, 0.61) 99.89%
      );
      background-size: cover;
    `;

Answer 2

对我有用的是将 <div> 放在 <BackgroundImage> 之上，然后在该 background: linear-gradient() 上设置 <div>：

const Gradient = styled.div`
  width: 100%;
  height: 100%;
  background: linear-gradient(
    ...
  );
`

const Component = () => {
  return(
  <BackgroundImage ...>
    <Gradient>
    ...
    </Gradient>
  <BackgroundImage>
  )
}