使用线性渐变的 Gatsby 中的多个背景图像

Question

我正在使用 Gatsby 3.2.1 并且我一直在尝试组合两个背景图像：实际上一个是图像另一个是线性渐变代码如下：

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { getImage } from "gatsby-plugin-image"
import styled from "styled-components"
import { BgImage } from "gbimage-bridge"


const GbiBridged = ({ children }) => {
  const { placeholderImage } = useStaticQuery(
    graphql`
      query {
        placeholderImage: file(name: { eq: "dust-background" }) {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    `
  )

  const image = getImage(placeholderImage)

  const combinedBgImages = [
    image,
    `linear-gradient(
    rgba(2, 0, 36, 1) 0%,
    rgba(25, 147, 150, 1) 35%,
    rgba(117, 144, 141, 1) 100%`,
  ].reverse()

 

  return <BgImage image={combinedBgImages}>{children}</BgImage>
}

export default GbiBridged

我无法获得任何背景（呈白色），因为在浏览器中检查 elements/styles 时收到以下警告：无效属性值：

background-image: linear-gradient( rgba(2, 0, 36, 1) 0%, rgba(25, 147, 150, 1) 35%, rgba(117, 144, 141, 1) 100%,url(http://localhost:8000/static/cb00063…/2bf0e/dust-background.webp); background-image: -webkit-linear-gradient( rgba(2, 0, 36, 1) 0%, rgba(25, 147, 150, 1) 35%, rgba(117, 144, 141, 1) 100%,url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==); opacity: 0; } .gbi-2113735767-4YexjQ8wGrPS624CPfojbG:after { z-index: -101; background-image: -webkit-linear-gradient( rgba(2, 0, 36, 1) 0%, rgba(25, 147, 150, 1) 35%, rgba(117, 144, 141, 1) 100%,url(http://localhost:8000/static/cb00063…/2bf0e/dust-background.webp); opacity: 1; };
}

谢谢！

Answer 1

您在 linear-gradient 规则中有一个未闭合的括号：

  const combinedBgImages = [
    image,
    `linear-gradient(
    rgba(2, 0, 36, 1) 0%,
    rgba(25, 147, 150, 1) 35%,
    rgba(117, 144, 141, 1) 100%)`, <-- here
  ].reverse()

此外，请注意堆叠顺序，最下面的图像应放在最后（如果需要）。您可能想要：

  const combinedBgImages = [
    `linear-gradient(
    rgba(2, 0, 36, 1) 0%,
    rgba(25, 147, 150, 1) 35%,
    rgba(117, 144, 141, 1) 100%)`,
    image,
  ].reverse()

使用线性渐变的 Gatsby 中的多个背景图像

Multiple background images in Gatsby using linear gradient

javascript

background-image

linear-gradients

reactjs

gatsby