如何将背景渐变添加到盖茨比图像中

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

尝试使用盖茨比背景图像并将不透明度添加到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

解决方案1-使用盖茨比图像

你可以使用position: relative/absolute来解决这个问题，如下所示：

import Img from "gatsby-image"
const Wrapper = styled.div`
position: relative;
/* width, height */
`
const Gradient = styled.div`
position: absolute;
inset: 0 0 0 0;
background: linear-gradient(/* your linear-gradient */);
`
const Text = styled.p`
position: absolute;
inset: /* position */
`
const Component = () => {
return(
<Wrapper>
<Img fluid={fluid} />
<Gradient />
<Text>Gradient over image, text over gradient</Text>
</Wrapper>
)
}

或者，如上所述：

解决方案2-使用盖茨比背景图像

对我来说有效的方法是在<BackgroundImage>上放置一个<div>，然后在<div>:上设置background: linear-gradient()

import BackgroundImage from "gatsby-background-image"
const Wrapper = styled.div`
width: /* your width */;
`
const Gradient = styled.div`
height: /* your height */;
background: linear-gradient(/* your linear-gradient */);
`
const Component = () => {
return(
<Wrapper>
<BackgroundImage ...>
<Gradient>
<p>Gradient over image, text over gradient</p>
</Gradient>
<BackgroundImage>
</Wrapper>
)
}