使用 gatsby-background-image 时选项卡悬停上的黑色轮廓

问题描述

我将 gatsby-background-image 与 Gatsby v3 一起使用，但由于某种原因，每当我将鼠标悬停在另一个标签上时，都会出现黑色轮廓

我不确定我的代码是否有问题，或者是插件本身有问题。我删除了 CSS 无济于事，所以这不是问题。

const ImageSlider = (props) => {

  const [sliderIndex,setSliderIndex] = useState(0);
  const images = ['../images/1.png','../images/2.png']

  const {backgroundImage} = useStaticQuery(graphql`
    query {
      backgroundImage: file(relativePath: {eq: "1.png"}) {
        id
        childImageSharp {
          gatsbyImageData(
            width: 1360,quality: 50,webpOptions: {quality: 70}
          )
        }
      }
    }
  `)

  const image = getimage(backgroundImage)
  const bg = convertToBgImage(image)

  return (
    <div className={styles.imgSlider}>
      <BackgroundImage Tag="section" {...bg} className={styles.bgImg}>
        {props.children}
      </BackgroundImage>
    </div>
  )
}

解决方法

我的解决方案是将 preserveStackingContext 设置为 true