使用Gatsby-background-image时如何在手机上使用纯背景色

问题描述

我正在使用gatsby-background-image来模糊我网站上的全屏图像。在移动版本上，背景图像几乎看不见，因此为了加快速度，我希望那里只是背景颜色。在CSS中隐藏该组件，然后更改桌面的可见性不起作用，因为所有子级也都被隐藏了。我发现了有关Art Direction的信息，但是由于我没有设置多个背景图片，因此不确定是否应该使用它。如果有人可以帮助我，我将不胜感激：）

backgroundsection.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;

解决方法

我最终使用 Art Direction 在移动设备上没有背景，我将默认源设置为空：

  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>
  );