在Gatsby-Background-Image上的线性梯度

Question

我有一个图像，我引用从Graphql查询在我的代码。在这个图像上，我想要一个线性梯度，它位于我的css模块中。我怎么能做到这一点不使用css写在我的javascript文件?

在js文件中写入线性梯度确实有效，但它把我的css样式放在了我不想要的地方。我如何在css模块中引用我的渐变样式，并使其与盖茨比背景图像一起工作?

在css-module文件中使用heroGradient类会覆盖整个图像。如何在堆栈中保留图像而不覆盖它，仅在顶部应用梯度?

const {image} = useStaticQuery(graphql`
query {
image: file(relativePath: { eq: "filename.jpg" }) {
childImageSharp {
fluid(quality: 100) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}
`)
// This works
// const imageDataStack = [image.childImageSharp.fluid, `linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%)`].reverse()
// This doesn't work
const imageDataStack = [image.childImageSharp.fluid, heroStyles.heroGradient].reverse()
return (
<BackgroundImage 
Tag="section"
className={heroStyles.heroContent}
fluid={imageDataStack}
>
<h1 className={heroStyles.heroText}>
{site.siteMetadata.description}
</h1>
</BackgroundImage>

.hero-gradient {
background: linear-gradient(270deg, #ffffff27 30%,  #e8d4b450 100%);

Answer 1

我怎么能做到这一点，而不使用css写在我的javascript文件吗?

不能，因为样式是内联应用的。如果你使用你的CSS模块(或其他类型的样式)，内联样式将总是覆盖你的CSS模块，而且，此外，你需要它们应用于gatsby-image的JavaScript逻辑。

您可以通过使用和尝试!important来强制此重写，但它可能导致一些不一致和您的背景(<BackgroundImage>组件)可能行为奇怪。

<section>(<BackgroundImage>)的一般样式可以使用CSS模块应用，但是当内联样式和CSS模块样式之间的规则发生冲突时，所以我的建议是使用CSS模块应用非冲突规则，并保留<BackgroundImage>的继承内联样式。