如何解决使用 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。