如何在 Gatsby 静态图像组件上添加叠加层？
Posted
技术标签:
【中文标题】如何在 Gatsby 静态图像组件上添加叠加层？【英文标题】：How can I add an overlay over a Gatsby Static Image Component? 【发布时间】：2021-11-23 11:16:50 【问题描述】：嘿，这是我第一次发帖，我是一个非常新的网络开发人员。
我正在尝试使用 Gatsby 静态图像组件来显示图像，然后用 div 元素覆盖该图像以覆盖图片。我正在使用具有绝对位置的样式组件，但是，该 div 并没有遍历我的图片，而是转到我的页脚组件。
最后，一旦我完成了页面的基本布局，我会将图像传输到我的健全 cms 以托管图像并使用 graphql 查询图像。
这是我目前所拥有的：
import React from "react"
import styled from "styled-components"
import StaticImage from "gatsby-plugin-image";
const StyledHome = styled.div`
display: flex;
gap: 2rem;
position: absolute;
flex-direction: row;
margin: 2rem 0;
`;
const HomeTextContainer = styled.div`
position: absolute;
z-index: 5;
left: 50%;
bottom: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: 50%;
`;
export default function IndexPage()
return (
<>
<StaticImage
src="../images/picturesWeb.png"
placeholder="traceSVG"
layout="fullWidth"
/>
<StyledHome>
<h2>Hello</h2>
</StyledHome>
</>
)
【问题讨论】：
您好，欢迎来到 SO。绝对定位元素根据带有position: relative 的父元素定位，如果没有，则根据根元素（<html>）定位。您需要做的是围绕您的图像和叠加层创建一个包装器 div，并提供一个 position: relative; 值。这将使您的叠加层相对于包装器定位。
【参考方案1】：
发生的情况是您的绝对定位元素相对于父元素，在这种情况下，父元素是body（或<div id="__gatsby">），因此它从页面底部出现。它与 Gatsby/React 无关，使用标准 HTML 也会发生同样的情况。
您需要做的是将整个集合包装在一个相对元素中，这样绝对淡入元素将相对于该元素定位。
import React from "react"
import styled from "styled-components"
import StaticImage from "gatsby-plugin-image";
const StyledHome = styled.div`
display: flex;
gap: 2rem;
position: absolute;
flex-direction: row;
margin: 2rem 0;
`;
const HomeTextContainer = styled.div`
position: absolute;
z-index: 5;
left: 50%;
bottom: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: 50%;
`;
const RelativeElement = styled.div`
position: relative;
`
export default function IndexPage()
return (
<RelativeElement>
<StaticImage
src="../images/picturesWeb.png"
placeholder="traceSVG"
layout="fullWidth"
/>
<StyledHome>
<h2>Hello</h2>
</StyledHome>
</RelativeElement>
)
缺少容器和包装器，但请理解并根据需要进行调整。
【讨论】：
以上是关于如何在 Gatsby 静态图像组件上添加叠加层？的主要内容，如果未能解决你的问题，请参考以下文章
许多应用程序（如 Tweetbot、Facebook 等）允许您通过下拉/上拉来关闭图像叠加层。这是如何实现的？