[英]How can I add an overlay over a Gatsby Static Image Component?
Hey it's my first time posting and I am a pretty new web developer.嘿,这是我第一次发帖,我是一个非常新的 web 开发人员。
I am trying to use Gatsby static image component to show an image and then overlay that image with a div element to write over the picture.我正在尝试使用 Gatsby static 图像组件来显示图像,然后用 div 元素覆盖该图像以覆盖图片。 I am using a styled component to with position absolute, however, that div isn't going over my picture but instead going to my foooter component.我正在使用带有 position 绝对样式的组件,但是,该 div 不会覆盖我的图片,而是转到我的页脚组件。
Down the line, once I get the basic layout of my page done, then I will transfer the images to my sanity cms to host the images and query the images with graphql.在线下,一旦我完成了页面的基本布局,我就会将图像传输到我的 sanity cms 以托管图像并使用 graphql 查询图像。
This is what I have so far:这是我到目前为止所拥有的:
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"
alt="Website Example"
placeholder="traceSVG"
layout="fullWidth"
/>
<StyledHome>
<h2>Hello</h2>
</StyledHome>
</>
)
}
What is happening is that your absolute positioned element is relative to the parent, in this case, the parent is the body
(or the <div id="__gatsby">
) so it's appearing from the bottom of the page.发生的事情是你的绝对定位元素是相对于父元素的,在这种情况下,父元素是body
(或<div id="__gatsby">
)所以它出现在页面底部。 It has nothing to do with Gatsby/React, it would happen the same using standard HTML.它与 Gatsby/React 无关,使用标准 HTML 也会发生同样的情况。
What you need to do, is to wrap the whole set inside a relative element, so the absolute fading-in element will be positioned relative to that.您需要做的是将整个集合包裹在一个相对元素中,这样绝对淡入元素将相对于该元素定位。
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"
alt="Website Example"
placeholder="traceSVG"
layout="fullWidth"
/>
<StyledHome>
<h2>Hello</h2>
</StyledHome>
</RelativeElement>
)
}
There's a lack of containers and wrappers but get the idea and tweak it as you wish.缺少容器和包装器,但可以根据需要了解并调整它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.