使用盖茨比背景图像时，如何在手机上使用普通背景色

Question

我正在使用盖茨比背景图像来模糊我网站上的全屏图像。在移动版上，背景图像几乎看不见，所以为了加快速度，我更喜欢那里的背景色。在CSS中隐藏组件，然后更改桌面的可见性是不起作用的，因为这样所有的子项都会被隐藏。我找到了艺术指导，但我不确定是否应该使用它，因为我没有设置多个背景图像。如果有人能帮我，我将不胜感激：(

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;

Answer 1

我最终使用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>
);