Gatsby-Background-Image 上的线性梯度

问题描述

我在代码中使用 Graphql 查询引用了一个图像。在这张图片上，我想要一个线性渐变，它位于我的 css 模块中。如何在不使用我的 javascript 文件中编写的 css 的情况下解决这个问题？

在 js 文件中写入线性渐变确实有效，但它会将我的 css 样式放在我不想要的地方。如何在 css 模块中引用我的渐变样式并使其与 Gatsby-Background-Image 一起使用？

在 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,#e8d4b450 100%);

解决方法

如何在不使用我的 javascript 中编写的 css 的情况下解决这个问题文件？

您不能，因为样式是内联应用的。如果您使用 CSS 模块（或其他样式），内联样式将始终覆盖您的 CSS 模块，此外，您还需要它们应用于 gatsby-image 的 JavaScript 逻辑。

您可以通过使用和尝试 !important 来强制执行此覆盖，但这可能会导致一些不一致，并且您的背景（<BackgroundImage> 组件）可能会表现得很奇怪。

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

css-modules gatsby