我正在使用一个大的英雄图片,绝对定位,以便在其上方放置文本叠加层。我还确保英雄图片是响应式的,无论屏幕尺寸如何。我遇到的问题是,无论屏幕尺寸如何,都要确保叠加层文本在背景图像中垂直居中。
下面的链接显示了我试图通过叠加文本实现的效果: https://www.youtube.com/watch?v=gfzWLbAbcCw 我的 JSX 代码如下:
以下链接包含一个用于调试的代码沙盒!https://codesandbox.io/s/charming-dijkstra-im7nb?file=/src/styles.scss:0-1101 任何建议都将不胜感激。
下面的链接显示了我试图通过叠加文本实现的效果: https://www.youtube.com/watch?v=gfzWLbAbcCw 我的 JSX 代码如下:
<>
<div className="container">
<div className="container-background">
<img
src="https://i.imgur.com/iyFtMNA.jpg"
alt="bg"
className="container-background-img"
/>
</div>
<div className="content">
<Navbar />
<div className="page-outer">
<div className="page-inner">
<div className="wel-top-header">text</div>
<div className="wel-top-middle">
<div style={{ marginTop: -30 }}>text</div>
<div style={{ marginTop: -48 }}>text</div>
</div>
<div className="wel-tagline">
Pagerland offers a great, smooth looking and ultra-fast landing
page templates build on Gatsby and React.
</div>
</div>
</div>
</div>
</div>
</>
我的CSS代码如下:
* {
margin: 0;
padding: 0;
}
.navbar {
height: 80px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
border: solid black 1px;
}
.container {
position: relative;
}
.container .container-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.25;
}
以下链接包含一个用于调试的代码沙盒!https://codesandbox.io/s/charming-dijkstra-im7nb?file=/src/styles.scss:0-1101 任何建议都将不胜感激。