1

我正在使用 gatsby-background-image 来模糊我网站上的全屏图像。在移动版本上，背景图像几乎不可见，因此为了加快速度，我更喜欢那里的背景颜色。在 CSS 中隐藏组件然后更改桌面的可见性不起作用，因为所有子项也都被隐藏了。我找到了有关艺术指导的信息，但我不确定是否应该使用它，因为我没有设置多个背景图像。如果有人可以帮助我，我将不胜感激:)

背景节.js

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import BackgroundImage from 'gatsby-background-image';

const FullBackground = ({ children }) => {
  const { desktop } = useStaticQuery(
    graphql`
      query {
        desktop: file(relativePath: { eq: "background-wide.jpg" }) {
          childImageSharp {
            fluid(quality: 100, maxWidth: 3310) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `);
    
  return (
    <BackgroundImage
      Tag="section"
      fluid={desktop.childImageSharp.fluid}
      title="Fullscreen Background"
      id="fullscreenbg"
      role="img"
      aria-label="Fullscreen Background"
      preserveStackingContext={true}
      style={{

        backgroundSize: 'cover',
        backgroundPosition: 'center center',
        backgroundAttachment: 'fixed',
      }}
    >
      {children}
    </BackgroundImage>
  );
};

export default FullBackground;
4

1 回答 1

0

我最终使用艺术指导在移动设备上没有背景，我将默认来源设置为空：

  const { desktop } = useStaticQuery(
    graphql`
      query {
        desktop: file(relativePath: { eq: "background-wide.jpg" }) {
          childImageSharp {
            fluid(quality: 100, maxWidth: 3310) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `);
  
  const sources = [
    {aspectRatio: 1, src: '', srcSet: ''},
    {...desktop.childImageSharp.fluid, media: `(min-width: 640px)`},
  ]
    
  return (
    <BackgroundImage
      Tag="section"
      backgroundColor="#000" 
      fluid={sources}
      ...
    >
      {children}
    </BackgroundImage>
  );
于 2021-05-19T20:49:54.947 回答